加载其他页面HTML页面或DIV元素

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

那么最新的其他选项？ 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）。

感谢您的建议！

来源

2013-08-21 StudioArena

顺便说一句，如果没有实际可行的解决方案，那么也许任何人都知道如何将IFRAME不会导致问题与新Firefox等浏览器如果它在所有浏览器中都可用，Iframe是非常好的选择。 – StudioArena

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

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

这将解决您的问题

来源

2013-08-21 11:21:38 mujaffars

谢谢我理论上它应该如何处理CSS类等Iframes是非常好的选择 - 容易，它做它应该唯一的问题是现在的浏览器支持。我希望有任何简单的工作。掌握你的建议 – StudioArena

TL;博士：第

对于导入另一个文档不应用从父文档的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

来源

2013-08-21 11:23:24 Quentin

谢谢昆汀。是的iframes很好，我同意最好的解决方案。浏览器支持是一个问题。就像我说过的，我希望任何简单的工作。但不知道是否存在。我不是很热衷于Jquery，所以我希望有任何可能的解决方案，但不知道现在:) – StudioArena

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

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

来源

2013-08-21 11:30:36 mcnesium

加载其他页面HTML页面或DIV元素

回答

相关问题