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


当前回答

object是HTML5中一个简单的替代方案:

<对象数据= " https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/ " 宽度= " 400 " 身高= " 300 " type = " text / html " > 替换内容 < /对象>

你也可以尝试embed:

<嵌入src = " https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/ " 宽度= 200 身高= 200 onerror="alert('URL无效!!');"/>

Re-

目前,StackOverflow已经关闭了对显示外部URL内容的支持,运行代码片段不显示任何内容。但对于您的网站,它将完美地工作。

其他回答

如果你想这样做,并控制从基本页面或内容被服务的服务器,你可以使用跨源资源共享(http://www.w3.org/TR/access-control/)允许客户端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');
?>

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

这似乎也可以工作,尽管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

你应该看看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新闻主页注入内容的工作示例。