Question

我想知道是否有替代HTML5的iFrames。我的意思是，能够在不使用iFrame的情况下在网页内注入跨域HTML。

Answer 1

基本上有4种方法可以将HTML嵌入到网页中：

<iframe> iframe的内容完全位于与您的网页不同的上下文中。虽然这主要是一个很棒的功能，并且它是浏览器版本中最兼容的功能，但它会产生额外的挑战（缩小将框架的大小包装到其内容非常困难，令人难以置信的脚本进入/退出，几乎不可能风格）。
的 AJAX 即可。正如此处所示的解决方案所示，您可以使用XMLHttpRequest对象检索数据并将其注入您的页面。它并不理想，因为它依赖于脚本技术，从而使执行变得更慢，更复杂，等等drawbacks。
的黑客即可。在这个问题中很少提到并且不太可靠。
HTML5网络组件。 HTML Imports是Web组件的一部分，允许将HTML文档捆绑在其他HTML文档中。其中包括HTML，CSS，JavaScript或.html文件可以包含的任何内容。这使得它成为一个很好的解决方案，有许多有趣的用例：将应用程序拆分为可以作为构建块分发的捆绑组件，更好地管理依赖关系以避免冗余，代码组织等。这是一个简单的例子：
```

<link rel="import" href="http://example.com/elements.html">
```

Native compatibility仍然是一个问题，但您可以使用polyfill使其在evergreen browsers今天发挥作用。

您可以了解更多here和here。

Answer 2

您可以使用object和embed，如下所示：

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
    Error: Embedded data could not be displayed.
</object>

这不是新的，但仍然有效。我不确定它是否具有相同的功能。

Answer 3

不，没有相应的。 <iframe>元素在HTML5中仍然有效。根据您需要的确切交互，可能会有不同的API。例如，postMessage方法允许您实现跨域JavaScript交互。但是，如果您想要显示跨域HTML内容（使用CSS设置样式并使用javascript进行交互），iframe仍然是一种很好的方法。

Answer 4

object是HTML5中的一个简单替代方法：

<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
    Alternative Content
</object>

您还可以尝试embed：

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />

Answer 5

如果要执行此操作并控制从中提供基页或内容的服务器，可以使用跨源资源共享（http://www.w3.org/TR/access-control/）来允许客户端JavaScript将数据加载到{ {1}}通过<div>：

XMLHttpRequest()

现在，对于整个操作的关键，您需要为服务器编写代码，为客户端提供// I safely ignore IE 6 and 5 (!) users // because I do not wish to proliferate // broken software that will hurt other // users of the internet, which is what // you're doing when you write anything // for old version of IE (5/6) xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { document.getElementById('displayDiv').innerHTML = xhr.responseText; } }; xhr.open('GET', 'http://api.google.com/thing?request=data', true); xhr.send();标头，指定您希望客户端代码能够通过{{}访问哪些域。 1}}。以下是您可以在页面顶部包含的PHP代码示例，以便将这些标头发送给客户端：

Access-Control-Allow-Origin

Answer 6

这似乎也有效，尽管W3C指出它不适用于外部（通常是非HTML）应用程序或交互式内容＆＃34;

<embed src="http://www.somesite.com" width=200 height=200 />

更多信息： http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp

Answer 7

iframe仍然是下载跨域可视内容的最佳方式。使用AJAX，您当然可以从网页下载HTML并将其粘贴到div中（正如其他人提到的那样）但是更大的问题是安全性。使用iframe，您将能够加载跨域内容，但由于内容实际上并不属于您，因此无法对其进行操作。另一方面，使用AJAX，您当然可以操纵您能够下载的任何内容，但是需要以允许您下载它的方式设置其他域的服务器。很多时候你将无法访问其他域的配置，即使你这样做，除非你一直进行这种配置，否则可能会很头疼。在这种情况下，iframe可以是更容易的替代方案。

正如其他人所提到的，你也可以使用embed标签和object标签，但这不一定比iframe更先进或更新。

HTML5更倾向于采用Web API从跨域获取信息。通常，Web API只返回数据，而不是HTML。

Answer 8

您可以使用XMLHttpRequest将页面加载到div（或页面的任何其他元素）。一个例子函数是：

function loadPage(){
if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
}else{
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("ID OF ELEMENT YOU WANT TO LOAD PAGE IN").innerHTML=xmlhttp.responseText;
    }
}

xmlhttp.open("POST","WEBPAGE YOU WANT TO LOAD",true);
xmlhttp.send();
}

如果您的服务器有能力，您也可以使用PHP来执行此操作，但由于您要求使用HTML5方法，因此这应该是您所需要的。

Answer 9

我创建了一个节点模块来解决这个问题node-iframe-replacement。您提供父网站的源URL和CSS选择器以将内容注入，并将两者合并在一起。

每隔5分钟就会收到对父网站的更改。

var iframeReplacement = require('node-iframe-replacement');

// add iframe replacement to express as middleware (adds res.merge method) 
app.use(iframeReplacement);

// create a regular express route 
app.get('/', function(req, res){

    // respond to this request with our fake-news content embedded within the BBC News home page 
    res.merge('fake-news', {
        // external url to fetch 
       sourceUrl: 'http://www.bbc.co.uk/news',
       // css selector to inject our content into 
       sourcePlaceholder: 'div[data-entityid="container-top-stories#1"]',
       // pass a function here to intercept the source html prior to merging 
       transform: null
    });
});

该来源包含working example BBC News注入getify's "You Don't Know Js" book主页的内容。

Answer 10

虽然没有任何完美的替代品，但我一直在做一些事情，但它的构建很容易，我很乐意说它有效（感谢junkfoodjunkie）

基本上，我当前的系统使用一些基本的php / server组合来加载然后将文件保存到服务器，我今天刚刚启动了项目，所以只加载了主文件（例如index.html）。我正在努力使其从页面加载50个链接以帮助提供支持。如果你想测试它：它是托管here。要使用它很简单，只需加载网址http://integratedmedia.ml/get/?link=并将页面添加到最后。无需添加https或www。如果你这样做也会导致问题:)无论如何，如果你按照那个设置，你的复制页面将在integratedmedia.ml/get/gettmp/YOURURL.html找到。这是一个例子：

integratedmedia.ml/get/?link=google.com

下载的文件现在位于

integratedmedia.ml/get/gettmp/google.com.html

Answer 11

在您自己网站的页面中加载另一个网站的页面的关键问题是安全性。定义了跨站点安全策略，如果另一个站点将其设置为严格的同源策略，您将没有机会直接在 iframe 中加载它。因此，要想找到 iframe 的替代方案，他们必须能够绕过这个安全策略限制，即使在未来，如果 WSC 引入任何新组件，它也会有类似的安全限制。

目前，绕过此问题的最佳方法是在您的逻辑中模拟正常的页面访问，这意味着 AJAX + 服务器端访问可能是一个不错的选择。您可以在服务器端设置一些代理并获取页面内容并将其加载到 iframe 中。这有效但并不完美，就像内容中存在任何链接或图像一样，它们可能无法访问。

通常，如果您尝试在自己的 iframe 中加载页面，则需要检查该页面是否可以在 iframe 中加载。此 post 提供了一些有关如何进行检查的指南。

Answer 12

您应该看一下JSON-P-当我遇到问题时，这对我来说是一个完美的解决方案：

https://en.wikipedia.org/wiki/JSONP

您基本上定义了一个javascript文件来加载所有数据，并定义另一个javascript文件来处理并显示它。这摆脱了iframe难看的滚动条。

使用HTML5替代iFrame

12 个答案: