在HTML5中有什么可以替代iFrame
最佳解决⽅法
通常有4种⽅法可以将HTML嵌⼊到⽹页中:
<iframe> iframe的内容完全位于当前页⾯不同的上下⽂中。虽然这是⼀个很棒的功能,⽽且是不同浏览器版本之间兼容最好的,但是它也带来了额外的问题(将frame⼤⼩跟⽹页内容设置⼀致⽐较⿇烦)。
AJAX。可以使⽤XMLHttpRequest对象来检索数据并将其注⼊到页⾯中。这不是最理想的⽅法,因为它依赖于脚本技术,从⽽可能使执⾏速度变慢,同时,过程也⽐较复杂,其他。
Hacks。很少这样做,不是很可靠。
HTML5 Web组件。作为Web组件的⼀部分,HTML Imports允许将HTML⽂档绑定到其他的HTML⽂档中。这包
括HTML,CSS,JavaScript或任何其他.html⽂件可以包含的内容。这使得它成为⼀个很好的解决⽅案,有许多有趣的⽤例:将应⽤程序拆分成捆绑的组件,将其作为构建块进⾏分发;更好地管理依赖关系以避免冗余,代码组织等。下⾯是⼀个简单的例⼦:
<link rel="import" href="example/elements.html">
次佳解决⽅法
Html5中没有完全等同的东西。 <iframe>元素在HTML5中仍然有效。根据您需要的确切交互,可能会有不同的API。例如
有postMessage⽅法,它允许您实现跨域JavaScript交互。但是,如果你想显⽰跨域的HTML内容(使⽤CSS样式,并与javascript交互),iframe是⼀个很好的⽅法。
第四种解决⽅法
可以使⽤对象并嵌⼊,如下所⽰:
<object data="www.web-source" width="600" height="400">
html frame<embed src="www.web-source" width="600" height="400"> </embed>
Error: Embedded data could not be displayed.
</object>
第五种⽅法
object在HTML5中是⼀个简单的选择:
<object data="blogs.claritycon/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
Alternative Content
</object>
也可以试试embed:
<embed src="blogs.claritycon/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论