使用HTML5替代iFrame

Question

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

Answer 1

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

• <iframe>iframe的内容完全位于与您的网页不同的上下文中.虽然这主要是一个很棒的功能,并且它是浏览器版本中最兼容的,但它带来了额外的挑战(缩小将框架的大小包装到其内容是非常困难的,令人难以置信的脚本进入/退出,几乎不可能风格).
• AJAX.正如此处显示的解决方案所示,您可以使用该XMLHttpRequest对象检索数据并将其注入您的页面.它并不理想,因为它依赖于脚本技术,从而使执行更慢,更复杂,以及其他缺点.
• 黑客.在这个问题中很少提到并且不太可靠.

• HTML5 Web组件.HTML Imports是Web组件的一部分,允许将HTML文档捆绑在其他HTML文档中.这包括HTML,CSS,JavaScript或其他任何一个.html文件可以包含.这使得它成为一个很好的解决方案,有许多有趣的用例:将应用程序拆分为可以作为构建块分发的捆绑组件,更好地管理依赖关系以避免冗余,代码组织等.这是一个简单的例子:

  <!-- Resources on other origins must be CORS-enabled. -->
  <link rel="import" href="http://example.com/elements.html">
  

原生兼容性仍然是一个问题,但您可以使用polyfill使其在常绿浏览器中工作.

您可以在这里和这里了解更多.

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/)来允许客户端 -用于将数据加载到<div>via中的JavaScript 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();

现在,对于整个操作的关键,您需要为服务器编写代码,为客户端提供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');
?>

Answer 6

这似乎也有效,尽管W3C指定它不是"用于外部(通常是非HTML)应用程序或交互式内容"

<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

我创建了一个节点模块来解决这个问题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
    });
});

该源代码包含一个将内容注入BBC 新闻主页的工作示例。