Question

我必须在网页的div中添加一个网页。我希望像iframe一样完成DIV。基本上，我将为我的div提供一个URL，它必须在其内部打开它...在现代HTML中我们有这样的东西吗？我无法使用框架，因为某些浏览器存在框架问题。

Answer 1

尝试使用<object>元素：

<div style="margin: 0 auto; width:100%; height:400px;">
    <object type="text/html" data="**URL to page**"
            style="width:100%; height:100%; margin:1%;">
    </object>
</div>

Answer 2

不。您不能在另一个div元素中嵌入一个完整的HTML文档，因为这是一个块级元素，而W3C已经定义了可以包含在其中的内容。

但有一个解决方法。请按照以下步骤操作：

使用ajax获取文档（jQuery rocks，使用它）
提取<body>元素的内容并将其放入div元素
获取<head>元素的所有链接和脚本，并将其附加到现有pgae的<head>元素中。

Answer 3

你应该使用iframe。这基本上就是iframe的用途。如果你坚持使用现代浏览器，他们就不会遇到iframe问题（不会超过你不得不面对使用div的问题）......

Answer 4

您可以使用iframe，或者如果您决定使用jQuery加载函数（http://api.jquery.com/load/），则需要避免跨脚本脚本问题 - 您需要创建某种代理来看看这个：{{3 }}

Answer 5

本来应该是问题本身，但是OP已经澄清了他不想使用iframe的原因是因为不允许帧间通信。好吧，这不是代理+ postMessage无法解决的问题。

我认为根本无法在另一个文档中嵌入完整的文档，保留样式和脚本的分离等内容，而不使用某种意义上的框架。

Answer 6

这实际上是Saeed回应的延伸。要解决跨站点脚本问题，您必须在自己的服务器上编写一个脚本，该脚本执行CURL调用以嵌入网页。然后，您的javascript将调用此脚本，将URL作为GET / POST参数传递。

我同意很多其他人的观点，这是一个你应该只使用iframe的情况......我相信你可以设置没有src标签的iframe，并手动将内容放入其中。这意味着你不需要采取赛义德提出的打破头部和身体的步骤。但是，您仍然需要我描述的脚本来绕过跨站点脚本。

Answer 7

实际上，我从上面同意弗雷德里克·哈米迪（FrédéricHamidi）的观点。只需在div中嵌入一个“对象”，然后引用该对象中另一页的URL。

您可以在第二页上或在单独的CSS文件中设置所有样式。该样式将与页面内容一起导入，而不会与当前页面样式或脚本冲突。

我在这些浏览器上测试了弗雷德里克·哈米迪（FrédéricHamidi）的理论，一切都很好。

•Internet Explorer – v11

•Microsoft Edge-v 84.0.522.59（官方内部版本）（64位）

•Google Chrome – v84.0.4147.105

•FireFox – v79.0

•勇敢– v1.11.104

•Opera – v69.0.3686.95

•Safari – v13

在div中包含一个网页

7 个答案: