0

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

那么其他选项是什么？IFRAMES 的好处是其他页面是单独加载的。因此，即使在 IFRAME 中加载的其他网站包含相同的 CSS 类等，一切都会按应有的方式显示。那么IFRAMES有什么好的替代品吗？

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

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

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

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

感谢您的建议！

4

3 回答 3

1

tl;博士：不。

对于导入另一个文档而不将父文档中的 CSS 应用到子文档（反之亦然），没有什么比 iframe 更好的了。

如果您将 jQueryload与页面片段一起使用-$("#target_div").load("other_page.html #some_id");那么您可以避免将子页面的 CSS 应用到父页面（除非<style>在无效位置存在元素） - 但这会完全消除子页面的 CSS（样式属性除外）和不会阻止父页面的 CSS 应用于页面。

Using<object data="foo.html"></object>将具有与 iframe 类似的效果，但浏览器支持较弱且 JavaScript API 的一致性较差。

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

于 2013-08-21T11:23:24.477 回答
0

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

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

这将解决您的问题

于 2013-08-21T11:21:38.007 回答
0

您应该使用子组合器指定您的 css：

body > div {…} /* affects only the div directly below the body tag */
body #target_div > div {…} /* affects the loaded content */
于 2013-08-21T11:30:36.540 回答