如何将外部网页加载到html页面的div中

Question

我需要在不使用iframe元素的情况下将响应式网站加载到HTML页面中的div中.

我试过这个链接 ; 它适用于单页网址,我在脚本中提到过.

$('#mydiv').load('http://localhost/qa/ask#external-div', function(response, status, xhr) {
    if (status == "error") {
        var msg = "Sorry but there was an error: ";
        alert(msg + xhr.status + " " + xhr.statusText);
      }
});

Answer 1

使用简单的HTML,

 <div> 
    <object type="text/html" data="http://validator.w3.org/" width="800px" height="600px" style="overflow:auto;border:5px ridge blue">
    </object>
 </div>

或jquery,

<script>
        $("#mydiv")
            .html('<object data="http://your-website-domain"/>');
</script>

JSFIDDLE DEMO

Answer 2

正如此 stackoverflow 线程中提到的，\n iframe、嵌入和对象元素之间的区别

\n

您可以使用 <embed> 标签代替 <object> 标签。如果您需要孩子和家长之间的沟通。

\n

\n

\xe2\x80\xa0 正如下面的评论所指出的；<object> 中的脚本将运行，但父上下文和子上下文无法直接通信。使用 <embed> 您可以从父级获取子级的上下文，反之亦然。这意味着您可以使用父级中的脚本来操作子级等。这部分对于 <object> 或 <iframe> 是不可能的，您必须设置一些其他机制，例如 JavaScript postMessage API。

\n

\n

<embed type="text/html" src="snippet.html" width="500" height="200">\n

\n