0
点赞
收藏
分享

微信扫一扫

在HTML5中有什么可以替代iFrame


最佳解决方法

通常有4种方法可以将HTML嵌入到网页中:

  • <iframe> iframe的内容完全位于当前页面不同的上下文中。虽然这是一个很棒的功能,而且是不同浏览器版本之间兼容最好的,但是它也带来了额外的问题(将frame大小跟网页内容设置一致比较麻烦)。
  • AJAX。可以使用XMLHttpRequest对象来检索数据并将其注入到页面中。这不是最理想的方法,因为它依赖于脚本技术,从而可能使执行速度变慢,同时,过程也比较复杂,其他缺点。
  • Hacks。很少这样做,不是很可靠。
  • HTML5 Web组件。作为Web组件的一部分,HTML Imports允许将HTML文档绑定到其他的HTML文档中。这包括HTMLCSSJavaScript或任何其他.html文件可以包含的内容。这使得它成为一个很好的解决方案,有许多有趣的用例:将应用程序拆分成捆绑的组件,将其作为构建块进行分发;更好地管理依赖关系以避免冗余,代码组织等。下面是一个简单的例子:

<link rel="import" href="http://example.com/elements.html">

 

 

次佳解决方法

Html5中没有完全等同的东西。 <iframe>元素在HTML5中仍然有效。根据您需要的确切交互,可能会有不同的API。例如有postMessage方法,它允许您实现跨域JavaScript交互。但是,如果你想显示跨域的HTML内容(使用CSS样式,并与javascript交互),iframe是一个很好的方法。

 

第四种解决方法

可以使用对象并嵌入,如下所示:

<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>

 

第五种方法

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>

也可以试试embed

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />

 

举报

相关推荐

0 条评论