替代iFrames与HTML5

Question

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

Answer 1

不，没有相应的。 <iframe>元素在HTML5中仍然有效。根据您需要的确切交互方式，可能会有不同的API。例如，有postMessage方法可以让你实现跨域javascript交互。但是，如果您想要显示跨域HTML内容（使用CSS进行样式设置并使用javascript进行交互），那么iframe仍是一种很好的方法。

Answer 2

您可以使用对象和嵌入，像这样：

<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

您可以使用XMLHttpRequest将页面加载到div（或页面中的任何其他元素）。个例函数是：

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的方法，这应该是你所需要的。

Answer 4

如果你想做到这一点，控制从该基地页面或内容正在服务的服务器，你可以使用跨源资源共享（​​）允许客户端的JavaScript将数据加载到一个<div>通过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 5

这也似乎工作，尽管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 6

iframe是依然下载交叉做的最好办法主要的视觉内容。使用AJAX，您可以从网页下载HTML并将其粘贴到div中（如其他人所述），但更大的问题是安全性。使用iframe，您可以加载跨域内容，但无法操作它，因为内容实际上并不属于您。另一方面，使用AJAX，您可以操纵您可以下载的任何内容，但是需要设置其他域的服务器，以便您可以先下载它。很多时候，您将无法访问其他域的配置，即使您这样做，除非您始终进行这种配置，否则可能会令人头疼。在这种情况下，iframe可以是更简单的选择。

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

HTML5已经走向了采用Web API来从跨域获取信息的方向。通常web API只是返回数据，而不是HTML。

Answer 7

基本上有4种方式嵌入到HTML网页：

• 一个iframe的内容完全是生活在比你的页面创建一个单独的上下文。虽然这是一个很棒的功能，并且它是浏览器版本之间最兼容的，但它带来了额外的挑战（缩小了框架大小以适应其内容的难度，令人沮丧的脚本进出，几乎不可能）。
• AJAX。正如这里所示的解决方案所证明的，您可以使用XMLHttpRequest对象来检索数据并将其注入到页面中。这并不理想，因为它依赖于脚本技术，从而使执行速度更慢，更复杂，其他drawbacks。
• 黑客。很少有人在这个问题中提到并且不太可靠。

• HTML5 Web Components。作为Web组件的一部分的HTML Imports允许将HTML文档捆绑到其他HTML文档中。这包括HTML,CSS,JavaScript或其他任何.html文件可以包含的内容。这使得它有许多有趣的使用情况很好的解决方案：拆分成应用程序的组件捆绑在一起，你可以分发作为构建块，更好地管理依赖关系，因此不再重复代码组织，等等。这里是一个简单的例子：

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

Native compatibility仍然是一个问题，但是您可以使用polyfill使其在evergreen browsers今天工作。

您可以了解更多here和here。

Answer 8

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

Answer 9

虽然目前还没有任何完美的替代我一直在努力的东西，它的内置BE-容易，我很高兴地说，它的工作原理（感谢junkfoodjunkie）

基本上，我目前的系统采用了一些基本的PHP /服务器组合来加载，然后将文件保存到服务器，我今天刚刚启动了该项目，因此只加载了主文件（如index.html）。我将努力使它从页面加载50个ish链接来帮助支持。如果你想测试它： 它托管here。使用它很简单，只需加载网址http://integratedmedia.ml/get/?link=并将页面添加到最后。无需在https或www中添加。如果你这样做，它也会导致问题:)无论如何，如果你遵循该设置你的复制页面将在integratedmedia.ml/get/gettmp/YOURURL.html找到。 下面是一个例子：

integratedmedia.ml/get/?link=google.com

下载的文件现在是

integratedmedia.ml/get/gettmp/ google.com.html

Answer 10

我创建了一个节点模块来解决这个问题node-iframe-replacement。您提供父站点和CSS选择器的源URL以将您的内容注入并将它们合并在一起。

每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 News主页的working example。

Answer 11

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

Answer 12

可以使用对象标记这也似乎工作