HTML5 iFrames的替代方案

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

680711 次浏览
小开

不，没有等价物。<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>

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

小开

可以使用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方法，因此这应该是您所需要的全部。

小开

如果你想这样做，并控制提供基本页面或内容的服务器，你可以使用跨源资源共享(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');
?>
小开

这似乎也可以工作，尽管W3C指定它不是“用于外部(通常是非html)应用程序或交互式内容”。

<embed src="http://www.somesite.com" width=200 height=200 />
< p >更多信息: http://www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp < / p >
小开

iframe仍然是下载跨域视觉内容的最佳方式。使用AJAX，你当然可以从网页上下载HTML并将其粘贴在div中(正如其他人所提到的)，但更大的问题是安全性。使用iframes，您将能够加载跨域内容，但不能操作它，因为内容实际上不属于您。另一方面，使用AJAX，您当然可以操作任何您能够下载的内容，但另一个域的服务器需要以这样一种方式设置，允许您开始下载它。很多时候，你无法访问其他域的配置，即使你可以，除非你一直都在做这种配置，否则它会让人头疼。在这种情况下，iframe可以是更简单的选择。

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

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

小开

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

  • iframe的内容完全存在于与你的页面不同的上下文中。虽然这是一个很棒的功能，而且是浏览器版本中最兼容的，但它也带来了额外的挑战(将框架的大小收缩到内容中是非常困难的，编写脚本时非常令人沮丧，几乎不可能设置样式)。
  • AJAX。正如这里展示的解决方案所证明的那样，您可以使用XMLHttpRequest对象来检索数据并将其注入到页面中。它并不理想，因为它依赖于脚本技术，从而使执行更慢，更复杂，以及其他缺点。
  • 黑客。这个问题很少提及，不太可靠。
  • HTML5 Web组件。HTML导入是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使它在常绿的浏览器 Today中工作。

你可以了解更多在这里和在这里。

小开

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

<object data="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width="400"
height="300"
type="text/html">
Alternative Content
</object>

你也可以尝试embed:

<embed src="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
width=200
height=200
onerror="alert('URL invalid !!');" />

重新

目前，StackOverflow已经关闭了对显示外部URL内容的支持，run code snippet没有显示任何内容。但对于您的网站，它将完美地工作。

小开

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

小开

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

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

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

小开

在自己网站的页面中加载另一个网站的页面的关键问题是安全性。这里定义了跨站点安全策略，如果另一个站点将其设置为严格的同源策略，则您将没有机会直接在iframe中加载它。因此，为了找到iframe的替代方案，它们必须能够绕过这个安全策略限制，即使在将来，如果WSC引入任何新组件，它也会有类似的安全限制。

目前，绕过这个问题的最好方法是在逻辑中模拟正常的页面访问，这意味着AJAX +服务器端访问可能是一个不错的选择。您可以在服务器端设置一些代理，获取页面内容并将其加载到iframe中。这是可行的，但不是完美的，因为如果在内容中有任何链接或图像，他们可能无法访问。

通常，如果您尝试在自己的iframe中加载一个页面，则需要检查该页面是否可以在iframe中加载。这个帖子给出了一些关于如何检查的指导方针。


提交答案