使用 HTML5 替代 iFrame
Posted
技术标签:
【中文标题】使用 HTML5 替代 iFrame【英文标题】:Alternative to iFrames with HTML5 【发布时间】:2012-01-31 22:16:38 【问题描述】:我想知道是否有使用 html5 的 iFrame 的替代品。 我的意思是,能够在不使用 iFrame 的情况下在网页中注入跨域 HTML。
【问题讨论】:
【参考方案1】:基本上有 4 种方法可以将 HTML 嵌入网页:
<iframe>
iframe 的内容完全存在于与您的页面不同的上下文中。虽然这主要是一个很棒的功能,并且是浏览器版本中最兼容的,但它带来了额外的挑战(将框架的大小缩小到其内容是很困难的,脚本输入/输出非常令人沮丧,几乎不可能设置样式)。李>
AJAX。正如此处显示的解决方案所证明的那样,您可以使用XMLHttpRequest
对象来检索数据并将其注入您的页面。这并不理想,因为它依赖于脚本技术,从而使执行更慢、更复杂,以及其他drawbacks。
黑客。这个问题中提到的很少,而且不是很可靠。
HTML5 网络组件。 HTML Imports 是 Web Components 的一部分,允许将 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了解更多信息。
【讨论】:
HTML5 Web 组件很有趣。 我知道这篇文章有点老了,但只是想评论一下:关于 AJAX,“这不是想法,因为它依赖于脚本技术”......那么,使用脚本有什么问题? AJAX 是这些选择中无可争议的领跑者,它正在迅速成为标准。 不幸的是,HTML 导入现在是一个过时的功能。 developer.mozilla.org/en-US/docs/Web/Web_Components/… 有什么新方法可以实现这一点吗? iFrame 的另一个关键缺点是,有许多网站将“X-Frame-Options”设置为“sameorigin”,然后直接拒绝连接。在这种情况下,您的 iFrame 保持为空。没有办法解决这个问题。【参考方案2】:你可以像这样使用对象和嵌入:
<object data="http://www.web-source.net" >
<embed src="http://www.web-source.net" > </embed>
Error: Embedded data could not be displayed.
</object>
这不是新的,但仍然有效。我不确定它是否具有相同的功能。
【讨论】:
谢谢大家,帮我为 facebooks like box 加载 sdk。【参考方案3】:不,没有等价物。 <iframe>
元素在 HTML5 中仍然有效。根据您需要的确切交互,可能会有不同的 API。例如有一个postMessage
方法可以让你实现跨域的javascript交互。但是,如果您想显示跨域 HTML 内容(使用 CSS 设置样式并使用 javascript 进行交互)iframe
仍然是一个好方法。
【讨论】:
我需要从谷歌加载内容。但是谷歌不能被iframed,有什么替代方法。 @Mike,另一种方法是使用 API 来提供您想要使用的服务。 Google 为其大部分服务提供 RESTful API。【参考方案4】:object
是 HTML5 中的一个简单替代方案:
<object data="https://github.com/AbrarJahin/Asp.NetCore_3.1-PostGRE_Role-Claim_Management/"
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 !!');" />
重新-
目前,*** 已关闭对显示外部 URL 内容的支持,run code snippet
不显示任何内容。但对于您的网站,它可以完美运行。
【讨论】:
两者都没有绕过 iframe 的安全策略等问题 请记住,大多数现代浏览器已弃用并删除了对浏览器插件的支持,因此如果您希望您的网站可以在普通用户的浏览器上运行,则依赖 【参考方案5】:如果您想执行此操作并控制提供基本页面或内容的服务器,您可以使用跨域资源共享 (http://www.w3.org/TR/access-control/) 允许客户端 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');
?>
【讨论】:
【参考方案6】:这似乎也有效,尽管 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
【讨论】:
【参考方案7】:iframe 仍然是下载跨域视觉内容的最佳方式。使用 AJAX,您当然可以从网页下载 HTML 并将其粘贴在 div 中(正如其他人所提到的),但更大的问题是安全性。使用 iframe,您将能够加载跨域内容,但由于内容实际上并不属于您,因此无法对其进行操作。另一方面,使用 AJAX,您当然可以操作您可以下载的任何内容,但其他域的服务器需要以允许您开始下载的方式进行设置。很多时候您将无法访问其他域的配置,即使您这样做,除非您一直进行这种配置,否则可能会令人头疼。在这种情况下,iframe 可能是更容易的选择。
正如其他人所提到的,您也可以使用 embed 标记和 object 标记,但这并不一定比 iframe 更高级或更新。
HTML5 更倾向于采用 Web API 从跨域获取信息。通常 Web API 只是返回数据而不是 HTML。
【讨论】:
这不是一个真正的答案,但肯定是一个nice-to-know
【参考方案8】:
我创建了一个节点模块来解决这个问题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
);
);
来源包含working example 将内容注入BBC News 主页。
【讨论】:
你好,我试过了,好像不行了?【参考方案9】:您可以使用 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 方法,所以这应该是您所需要的。
【讨论】:
使用 XMLHttpRequest 从其他域加载内容被大多数浏览器阻止。 Op 要求跨域,这个答案无效。【参考方案10】:在您自己网站的页面中加载另一个网站的页面的关键问题是安全性。定义了跨站点安全策略,如果另一个站点将其设置为严格的同源策略,您将没有机会直接在 iframe 中加载它。因此,要找到 iframe 的替代方案,他们必须能够绕过这个安全策略限制,即使在将来,如果 WSC 引入任何新组件,它也会有类似的安全限制。
目前,绕过此问题的最佳方法是在您的逻辑中模拟正常的页面访问,这意味着 AJAX + 服务器端访问可能是一个不错的选择。您可以在服务器端设置一些代理并获取页面内容并将其加载到 iframe 中。这可行,但并不完美,好像内容中有任何链接或图像,它们可能无法访问。
通常,如果您尝试在自己的 iframe 中加载页面,则需要检查该页面是否可以在 iframe 中加载。这个post 提供了一些关于如何进行检查的指导。
【讨论】:
【参考方案11】:你应该看看 JSON-P - 当我遇到这个问题时,这对我来说是一个完美的解决方案:
https://en.wikipedia.org/wiki/JSONP
您基本上定义了一个加载所有数据的 javascript 文件和另一个处理和显示数据的 javascript 文件。这摆脱了丑陋的 iframe 滚动条。
【讨论】:
以上是关于使用 HTML5 替代 iFrame的主要内容,如果未能解决你的问题,请参考以下文章