在HTML5中有什么可以替代iFrame

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

最佳解决方法

通常有4种方法可以将HTML嵌入到网页中：

<iframe> iframe的内容完全位于当前页面不同的上下文中。虽然这是一个很棒的功能，而且是不同浏览器版本之间兼容最好的，但是它也带来了额外的问题(将frame大小跟网页内容设置一致比较麻烦)。
AJAX。可以使用XMLHttpRequest对象来检索数据并将其注入到页面中。这不是最理想的方法，因为它依赖于脚本技术，从而可能使执行速度变慢，同时，过程也比较复杂，其他缺点。
Hacks。很少这样做，不是很可靠。
HTML5 Web组件。作为Web组件的一部分，HTML Imports允许将HTML文档绑定到其他的HTML文档中。这包括HTML，CSS，JavaScript或任何其他.html文件可以包含的内容。这使得它成为一个很好的解决方案，有许多有趣的用例：将应用程序拆分成捆绑的组件，将其作为构建块进行分发；更好地管理依赖关系以避免冗余，代码组织等。下面是一个简单的例子：
```

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

原生兼容性(Native compatibility)仍然是一个问题，但可以使用polyfill使其在evergreen browsers中能工作。

更多资料见www.html5rocks.com和webcomponents.org。

次佳解决方法

Html5中没有完全等同的东西。 <iframe>元素在HTML5中仍然有效。根据您需要的确切交互，可能会有不同的API。例如有postMessage方法，它允许您实现跨域JavaScript交互。但是，如果你想显示跨域的HTML内容(使用CSS样式，并与javascript交互)，iframe是一个很好的方法。

第三种解决方法

可以使用对象并嵌入，如下所示：

<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>

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

第四种方法

如果一定要用iframe功能并控制从中提供基本页面或内容的服务器，则可以使用跨源资源共享(http://www.w3.org/TR/access-control/)允许client-side JavaScript通过XMLHttpRequest()将数据加载到<div>中：

// 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();

现在，为了完成整个操作的关键步骤，您需要为您的服务器编写代码，以便为客户端提供Access-Control-Allow-Origin头文件，指定您希望客户端代码能够通过XMLHttpRequest()访问哪些域。以下是可以包含在页面顶部的PHP代码示例，以便将这些标题发送给客户端：

<?php
  header('Access-Control-Allow-Origin: http://api.google.com');
  header('Access-Control-Allow-Origin: http://some.example.com');
?>

第五种方法

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 />

其他补充

iframe仍然是下载跨域可视内容的最佳方式。有了AJAX，你肯定可以从网页上下载HTML并粘贴到div中(正如其他人所说的那样)，但更大的问题是安全性。使用iframe，能够加载跨域内容，但无法操作它，因为内容实际上不属于您。另一方面，使用AJAX，您可以操纵任何您可以下载的内容，但是需要设置其他域的服务器，以便您可以下载。很多时候，你将无法访问其他域的配置，这可能是一个头痛的问题。在这种情况下，iframe用起来更容易。

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

HTML5在采用Web API来从跨域获取信息方面走得更远。通常web API只是返回数据，而不是HTML。

html5 iframe

参考文献

Alternative to iFrames with HTML5