使用JQueryAjax防止Ajax CSS破坏主CSS


Prevent Ajax CSS to ruin main CSS with JQuery Ajax

我正在开发一个网页,该网页调用另一个具有强大jquery ajax功能的页面。我的问题是:ajax页面中有一个css文件。被调用的页面需要它,但我不想在主页中看到子页面的css样式。

以下是我如何调用子页面的摘要:

<script>
$.ajax({
type: "GET",
    url: "subpage.html",
    success: function(msg){
       $('#box').html(msg);
    }
});
</script>
<div id='box'>
</div>

因此,subpage.html是我项目的另一个模块的一种接口,它有自己的CSS FILES。有什么好的知识或技巧可以防止css文件出现在我的主页上吗?PHP解决方案也是可以接受的。

您可以使用iframes(W3C参考,MDN参考)。要使用JavaScript在iframe中加载特定页面,请使用类似的HTML:

<iframe id = "iframeID" height = "300px" width = "300px"></iframe>

然后,当你想加载页面时:

document.getElementById("iframeID").src = "subpage.html";

您可以使用jQuery.load,如下所示:

$('#box').load('subpage.html #the_id_of_something');

此示例将把#the_id_of_something的内容从subpage.html加载到页面上的#box中。