Question

好的我想要的是在主页面内加载HTML页面并在主页面DIV中显示它的内容。我知道IFRAME可以做到这一点，但寻找任何其他可能的解决方案。有一些问题使用新版本的Firefox加载IFRAMES。内容未显示，一些用户报告问题。

那么其他选项是什么？ IFRAMES的好处是可以单独加载其他页面。因此，即使在IFRAME中加载的其他网站包含相同的CSS类等，也会显示所有内容应该如此。那么IFRAMES有什么好的替代品吗？

我不是JQuery专家，但我找到了这个选项：

$("#target_div").load("other_page.html");

看起来不错，但如果两个页面（parent和other_page.html）包含相同的CSS类，选择器等，那么在我的情况下，来自“other_page.html”的CSS正在生效。任何可能的解决方案（IFRAME旁边）？

基本上我想将other_page.html HTML内容显示到父页面div中，而不会在两个页面（parent和other_page）上引起CSS和其他内容的问题。

感谢您的建议！

Answer 1

tl; dr ：不。

为了导入另一个文档，不用将父文档中的CSS应用到子文档，反之亦然，没有比iframe更好的了。

如果您使用jQuery的load和page fragment - $("#target_div").load("other_page.html #some_id"); - 那么您可以避免将子页面的CSS应用于父页面（除非有<style>个元素在一个无效的地方） - 但这完全消除了子页面的CSS（样式属性除外）并且不会阻止父页面的CSS应用于页面。

使用<object data="foo.html"></object>会产生与iframe类似的效果，但浏览器支持较弱且JavaScript API不一致。

使用完整帧将具有与iframe类似的效果，但需要仅包含帧的顶级框架集文档。 HTML 5不支持框架。

Answer 2

您需要从other_page.html中删除与基页冲突的css类。

最佳做法是不要为ajax页面应用css类（other_page.html是你的ajax页面，因为你通过jquery load方法得到它的内容）只获取页面内容。并在主页上编写Ajax内容所需的类。

这将解决您的问题

Answer 3

你应该使用儿童组合器指定你的CSS：

body > div {…} /* affects only the div directly below the body tag */
body #target_div > div {…} /* affects the loaded content */

在页面或DIV元素中加载另一页HTML

3 个答案: