我想知道是否有HTML5的iFrames替代方案。 我的意思是,能够在一个网页中注入跨域HTML,而不使用iFrame。


当前回答

我创建了一个节点模块来解决这个问题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新闻主页注入内容的工作示例。

其他回答

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

你可以使用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>

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

An iframe is still the best way to download cross-domain visual content. With AJAX you can certainly download the HTML from a web page and stick it in a div (as others have mentioned) however the bigger problem is security. With iframes you'll be able to load the cross domain content but won't be able to manipulate it since the content doesn't actually belong to you. On the other hand with AJAX you can certainly manipulate any content you are able to download but the other domain's server needs to be setup in such a way that will allow you to download it to begin with. A lot of times you won't have access to the other domain's configuration and even if you do, unless you do that kind of configuration all the time, it can be a headache. In which case the iframe can be the MUCH easier alternative.

正如其他人提到的,你也可以使用embed标签和object标签,但这并不一定比iframe更高级或更新。

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

你应该看看JSON-P -当我有这个问题时,这是一个完美的解决方案:

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

您基本上定义了一个javascript文件来加载所有数据,另一个javascript文件处理并显示数据。这样就摆脱了iframes丑陋的滚动条。

我创建了一个节点模块来解决这个问题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新闻主页注入内容的工作示例。