• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

在HTML5中有什么可以替代iFrame

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

我想知道在HTML5中是否有可替代iFrames功能。我的意思是,能够在不使用iFrame的情况下在网页内部注入跨域HTML。

最佳解决方法

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

  • <iframe> iframe的内容完全位于当前页面不同的上下文中。虽然这是一个很棒的功能,而且是不同浏览器版本之间兼容最好的,但是它也带来了额外的问题(将frame大小跟网页内容设置一致比较麻烦)。

  • AJAX。可以使用XMLHttpRequest对象来检索数据并将其注入到页面中。这不是最理想的方法,因为它依赖于脚本技术,从而可能使执行速度变慢,同时,过程也比较复杂,其他缺点。

  • Hacks。很少这样做,不是很可靠。

  • HTML5 Web组件。作为Web组件的一部分,HTML Imports允许将HTML文档绑定到其他的HTML文档中。这包括HTMLCSSJavaScript或任何其他.html文件可以包含的内容。这使得它成为一个很好的解决方案,有许多有趣的用例:将应用程序拆分成捆绑的组件,将其作为构建块进行分发;更好地管理依赖关系以避免冗余,代码组织等。下面是一个简单的例子:

    <!-- Resources on other origins must be CORS-enabled. -->
    <link rel="import" href="http://example.com/elements.html">
    

原生兼容性(Native compatibility)仍然是一个问题,但可以使用polyfill使其在evergreen browsers中能工作。

更多资料见www.html5rocks.com和webcomponents.org。

次佳解决方法

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>

这并不是新功能,但仍然有效。我不确定Html5是否具有相同的功能。

第四种方法

如果一定要用iframe功能并控制从中提供基本页面或内容的服务器,则可以使用跨源资源共享(http://www.w3.org/TR/access-control/)允许client-side JavaScript通过XMLHttpRequest()将数据加载到<div>中:

// 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');
?>

第五种方法

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

其他补充

iframe仍然是下载跨域可视内容的最佳方式。有了AJAX,你肯定可以从网页上下载HTML并粘贴到div中(正如其他人所说的那样),但更大的问题是安全性。使用iframe,能够加载跨域内容,但无法操作它,因为内容实际上不属于您。另一方面,使用AJAX,您可以操纵任何您可以下载的内容,但是需要设置其他域的服务器,以便您可以下载。很多时候,你将无法访问其他域的配置,这可能是一个头痛的问题。在这种情况下,iframe用起来更容易。

正如其他人所提到的,你也可以使用嵌入标签和对象标签,但这不一定比iframe更先进或更新颖。

HTML5在采用Web API来从跨域获取信息方面走得更远。通常web API只是返回数据,而不是HTML。

参考文献

  • Alternative to iFrames with HTML5


鲜花

握手

雷人

路过

鸡蛋
专题导读
上一篇:
使用IntelliJ生成类图发布时间:2022-05-14
下一篇:
在TensorFlow中怎么打印Tensor对象的值发布时间:2022-05-14
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap