我想知道是否有HTML5的iFrames替代方案。 我的意思是,能够在一个网页中注入跨域HTML,而不使用iFrame。
当前回答
你应该看看JSON-P -当我有这个问题时,这是一个完美的解决方案:
https://en.wikipedia.org/wiki/JSONP
您基本上定义了一个javascript文件来加载所有数据,另一个javascript文件处理并显示数据。这样就摆脱了iframes丑陋的滚动条。
其他回答
你可以使用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方法,因此这应该是您所需要的全部。
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.
正如其他人提到的,你也可以使用embed标签和object标签,但这并不一定比iframe更高级或更新。
HTML5更倾向于采用web api从跨域获取信息。通常web api只返回数据而不是HTML。
基本上有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 XMLHttpRequest object 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, JavaScript or anything else an .html file 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:
<!—其他来源的资源必须启用cors。--> <link rel="import" href="http://example.com/elements.html">
本地兼容性仍然是一个问题,但您可以使用polyfill使其在当前的常绿浏览器中工作。
你可以在这里和这里了解更多。
这似乎也可以工作,尽管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
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?
- 输入触发器按钮单击