替代HTML5的iFrame
我想知道是否有替代HTML5的iFrames。 我的意思是，能够在不使用iFrame的情况下在网页内部注入跨域HTML。
基本上有4种方法将HTMLembedded到网页中：
-
<iframe>iframe的内容完全位于与页面不同的上下文中。 虽然这是一个很棒的function，而且是浏览器版本之间最兼容的，但是它带来了额外的挑战（收缩包装框架的大小非常困难，令人沮丧的脚本进出，几乎不可能）。 - AJAX 。 正如这里所展示的解决scheme所certificate的那样，您可以使用
XMLHttpRequest对象来检索数据并将其注入到页面中。 这是不理想的，因为它依赖于脚本技术，从而使执行速度更慢，更复杂，除其他缺点之外 。 - 黑客 。 很less提到这个问题，不是很可靠。
-
HTML5 Web组件 。 作为Web组件的一部分，HTML Imports允许将HTML文档捆绑到其他HTML文档中。 这包括
HTML，CSS，JavaScript或其他任何.html文件可以包含的内容。 这使得它成为一个很好的解决scheme，有许多有趣的用例：将应用程序拆分成可以作为构build块分发的捆绑组件，更好地pipe理依赖关系以避免冗余，代码组织等。这里是一个简单的例子：<!-- Resources on other origins must be CORS-enabled. --> <link rel="import" href="http://example.com/elements.html">
本机兼容性仍然是一个问题，但是您可以使用polyfill使其在常青的浏览器中工作。
你可以在这里和这里了解更多。
不，没有相同的东西。 <iframe>元素在HTML5中仍然有效。 根据您需要的确切交互，可能会有不同的API。 例如有postMessage方法，它允许您实现跨域JavaScript交互。 但是，如果要显示跨域HTML内容（使用CSS进行样式化，并使用javascript进行交互）， iframe仍然是一种很好的方法。
您可以使用对象并embedded，如下所示：
<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>
这不是新的，但仍然有效。 我不确定它是否具有相同的function。
如果您想要这样做，并控制从中提供基本页面或内容的服务器，则可以使用“跨源资源共享”（ 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'); ?>
object在HTML5中是一个简单的select：
<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>
这也似乎工作，虽然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
您可以使用XMLHttpRequest将页面加载到div（或页面中的任何其他元素）。 一个例证function是：
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的方法，这应该是你所需要的。
iframe仍然是下载跨域视觉内容的最佳方式。 有了AJAX，你肯定可以从网页上下载HTML并粘贴到div中（正如其他人所说的那样），但更大的问题是安全性。 使用iframe，您将能够加载跨域内容，但无法操作它，因为内容实际上不属于您。 另一方面，使用AJAX，您可以操纵任何您可以下载的内容，但是需要设置其他域的服务器，以便您可以下载。 很多时候，你将无法访问其他域的configuration，即使你这样做了，除非你一直做这种configuration，这可能是一个头痛的问题。 在这种情况下，iframe可以是更容易的select。
正如其他人所提到的，你也可以使用embedded标签和对象标签，但这不一定比iframe更先进或更新。
HTML5在采用Web API来从跨域获取信息方面走得更远。 通常web API只是返回数据，而不是HTML。
我创build了一个节点模块来解决这个问题node-iframe-replacement 。 您提供了父站点和CSSselect器的源URL，将您的内容注入，并将它们合并在一起。
每五分钟就会收到对父站点的更改。
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新闻主页的工作示例 。
虽然没有任何完美的替代品，但我一直在努力，它的构build方式非常简单，我很高兴地说它是有效的（感谢junkfoodjunkie ）
基本上，我目前的系统使用一些基本的PHP /服务器组合加载，然后将文件保存到服务器，我今天刚启动项目，只有主文件（如index.html）加载。 我将努力使它从页面加载50个ish链接来帮助支持。 如果你想testing它：它在这里托pipe。 要使用它很简单，只需加载URL http://integratedmedia.ml/get/?link=并将页面添加到最后。; 无需在https或www中添加。 这也将导致问题，如果你:)反正如果你按照设置你的复制页面可以在integratedmedia.ml/get/gettmp/YOURURL.htmlfind。 这里是一个例子：
integratedmedia.ml/get/?link=google.com
下载的文件现在在
integratedmedia.ml/get/gettmp/google.com.html
<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>
你可以使用对象标签这也似乎工作
