Html 使用 HTML5 替代 iFrame
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8702704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternative to iFrames with HTML5
提问by stemlaur
I would like to know if there is an alternative to iFrames with HTML5. I mean by that, be able to inject cross-domains HTML inside of a webpage without using an iFrame.
我想知道是否有替代 HTML5 的 iFrames。我的意思是，能够在不使用 iFrame 的情况下在网页内注入跨域 HTML。
回答by Oriol
Basically there are 4 ways to embed HTML into a web page:
基本上有 4 种方法可以将 HTML 嵌入到网页中：
<iframe>An iframe's content lives entirely in a separate context than your page. While that's mostly a great feature and it's the most compatible among browser versions, it creates additional challenges (shrink wrapping the size of the frame to its content is tough, insanely frustrating to script into/out of, nearly impossible to style).- AJAX. As the solutions shown here prove, you can use the
XMLHttpRequestobject to retrieve data and inject it to your page. It is not ideal because it depends on scripting techniques, thus making the execution slower and more complex, among other drawbacks. - Hacks. Few mentioned in this question and not very reliable.
HTML5 Web Components. HTML Imports, part of the Web Components, allows to bundle HTML documents in other HTML documents. That includes
HTML,CSS,JavaScriptor anything else an.htmlfile can contain. This makes it a great solution with many interesting use cases: split an app into bundled components that you can distribute as building blocks, better manage dependencies to avoid redundancy, code organization, etc. Here is a trivial example:<!-- Resources on other origins must be CORS-enabled. --> <link rel="import" href="http://example.com/elements.html">
<iframe>iframe 的内容完全位于与您的页面不同的上下文中。虽然这主要是一个很棒的功能，并且它在浏览器版本中是最兼容的，但它带来了额外的挑战（将框架的大小缩小到其内容很难，脚本输入/输出非常令人沮丧，几乎不可能设置样式）。- 阿贾克斯。正如此处显示的解决方案所证明的那样，您可以使用该
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">
Native compatibilityis still an issue, but you can use a polyfillto make it work in evergreen browsersToday.
本机兼容性仍然是一个问题，但您可以使用polyfill使其在今天的常绿浏览器中工作。
回答by nate
You can use object and embed, like so:
您可以使用 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>
Which isn't new, but still works. I'm not sure if it has the same functionality though.
这不是新的，但仍然有效。我不确定它是否具有相同的功能。
回答by Darin Dimitrov
No, there isn't an equivalent. The <iframe>element is still valid in HTML5. Depending on what exact interaction you need there might be different APIs. For example there's the postMessagemethod which allows you to achieve cross domain javascript interaction. But if you want to display cross domain HTML contents (styled with CSS and made interactive with javascript) iframestays as a good way to do.
不，没有等价物。该<iframe>元素在 HTML5 中仍然有效。根据您需要的确切交互，可能有不同的 API。例如，有postMessage一种方法可以让您实现跨域 javascript 交互。但是，如果您想显示跨域 HTML 内容（使用 CSS 样式并使用 javascript 进行交互）iframe仍然是一个好方法。
回答by Abrar Jahin
objectis an easy alternative in HTML5:
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>You can also try embed:
您也可以尝试embed：
<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 onerror="alert('URL invalid !!');" />回答by L0j1k
If you want to do this and control the server from which the base page or content is being served, you can use Cross Origin Resource Sharing (http://www.w3.org/TR/access-control/) to allow client-side JavaScript to load data into a <div>via XMLHttpRequest():
如果您想这样做并控制提供基本页面或内容的服务器，您可以使用跨源资源共享 ( http://www.w3.org/TR/access-control/) 以允许客户端-侧 JavaScript 将数据加载到<div>via 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();
Now for the lynchpin of this whole operation, you need to write code for your server that will give clients the Access-Control-Allow-Originheader, specifying which domains you want the client-side code to be able to access via XMLHttpRequest(). The following is an example of PHP code you can include at the top of your page in order to send these headers to clients:
现在对于整个操作的关键，您需要为您的服务器编写代码，为客户端提供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');
?>
回答by Thomas Simoens
This also does seem to work, although W3C specifies it is not intended "for an external (typically non-HTML) application or interactive content"
这似乎也有效，尽管 W3C 指定它不是“用于外部（通常是非 HTML）应用程序或交互式内容”
<embed src="http://www.somesite.com" width=200 height=200 />
More info: http://www.w3.org/wiki/HTML/Elements/embedhttp://www.w3schools.com/tags/tag_embed.asp
更多信息：http: //www.w3.org/wiki/HTML/Elements/embed http://www.w3schools.com/tags/tag_embed.asp
回答by Adam
An iframe is still the best way to download cross-domain visual content. With AJAX you can certainly download the HTML from a web page and stick it in a div (as others have mentioned) however the bigger problem is security. With iframes you'll be able to load the cross domain content but won't be able to manipulate it since the content doesn't actually belong to you. On the other hand with AJAX you can certainly manipulate any content you are able to download but the other domain's server needs to be setup in such a way that will allow you to download it to begin with. A lot of times you won't have access to the other domain's configuration and even if you do, unless you do that kind of configuration all the time, it can be a headache. In which case the iframe can be the MUCH easier alternative.
iframe 仍然是下载跨域视觉内容的最佳方式。使用 AJAX，您当然可以从网页下载 HTML 并将其粘贴在 div 中（正如其他人所提到的），但更大的问题是安全性。使用 iframe，您将能够加载跨域内容，但无法操作它，因为该内容实际上并不属于您。另一方面，使用 AJAX，您当然可以操作您能够下载的任何内容，但其他域的服务器需要以允许您开始下载的方式进行设置。很多时候，您将无法访问其他域的配置，即使您访问了，除非您一直进行这种配置，否则会很头疼。在这种情况下，iframe 可能是更简单的选择。
As others have mentioned you can also use the embed tag and the object tag but that's not necessarily more advanced or newer than the iframe.
正如其他人提到的，您也可以使用 embed 标签和 object 标签，但这不一定比 iframe 更先进或更新。
HTML5 has gone more in the direction of adopting web APIs to get information from cross domains. Usually web APIs just return data though and not HTML.
HTML5 在采用 Web API 以从跨域获取信息的方向上走得更远。通常 Web API 只是返回数据而不是 HTML。
回答by John Doherty
I created a node module to solve this problem node-iframe-replacement. You provide the source URL of the parent site and CSS selector to inject your content into and it merges the two together.
我创建了一个节点模块来解决这个问题node-iframe-replacement。您提供父站点的源 URL 和 CSS 选择器以将您的内容注入其中并将两者合并在一起。
Changes to the parent site are picked up every 5 minutes.
每 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
});
});
The source contains a working exampleof injecting content into the BBC Newshome page.
回答by CupOfTea696
You can use an XMLHttpRequest to load a page into a div (or any other element of your page really). An exemple function would be:
您可以使用 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();
}
If your sever is capable, you could also use PHP to do this, but since you're asking for an HTML5 method, this should be all you need.
如果您的服务器有能力，您也可以使用 PHP 来执行此操作，但由于您要求使用 HTML5 方法，这应该就是您所需要的。
