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

Posted

技术标签:

【中文标题】如何将外部网页加载到 html 页面的 div 中【英文标题】:How to load an external webpage into a div of a html page 【发布时间】:2013-08-11 07:15:00 【问题描述】:

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

我试过this link;它适用于我在脚本中提到的单页 URL。

$('#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);
      
);

【问题讨论】:

您是否已获得外部网站所有者的许可?在您自己的网站内构建另一个网站是“不受欢迎的”(如果不是公然侵犯版权的话)。 我尝试使用 jquery 将外部网站显示到我的网页 div 中。但它适用于外部网站的单个页面。我需要在 div 中显示整个外部网站(所有页面)我的网页。 How do I load a webpage inside a div using javascript without IFRAME and JQuery?的可能重复 不需要许可,因为我正在尝试将我自己的网页显示到另一个 html 网页的 div 中 Ajax/jQuery - Load webpage content into a div on page load?的可能重复 【参考方案1】:

正如这个 *** 线程中提到的, difference between iframe, embed and object elements

您可以使用 标签,而不是 标签。如果您需要孩子和父母之间的沟通。

† 正如下面的 cmets 所指出的; 中的脚本将运行,但父上下文和子上下文不能直接通信。使用 您可以从父级获取子级的上下文,反之亦然。这意味着他们可以使用父级中的脚本来操作子级等。这部分对于

<embed type="text/html" src="snippet.html"  >

【讨论】:

【参考方案2】:

使用简单的html,

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

或者jquery,

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

JSFIDDLE DEMO

【讨论】:

如果我这样使用,我会得到滚动条,就像我们在 div 中实现 iframe 时得到的那样。你能告诉一些其他方式在 html 页面中显示网站 您可以根据需要隐藏滚动条。 overflow:hidden 添加到 iframe 或对象中。 嗯,你用的是jquery,对吧?...$("#myContainer").css("overflow","hidden"); @Optimus Prime ,是的,它确实有效(FF 27.0),不知道你的视图如何,但你看到的滚动条是来自小提琴 HTML 元素的滚动条。如果看看你看到的第一个小提琴 2滚动条。还是我解释错了?

以上是关于如何将外部网页加载到 html 页面的 div 中的主要内容,如果未能解决你的问题,请参考以下文章

如何从多个子菜单项将外部 div 加载到 master.html div

桌面应用程序中的 HTML 加载带有 iframe 的页面

如何从外部 HTML 文件加载/替换整个 DIV?

如何从外部HTML文件加载/替换整个DIV?

如果存在,如何包含外部 html,否则啥都不做?

html网页中,ONCLICK事件时,在指定DIV中打开外部JS文件,怎样实现?