当前位置: 首页>>技术问答>>正文


在HTML5中有什么可以替代iFrame

我想知道在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.comwebcomponents.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。

html5 iframe

参考文献

本文由《纯净天空》出品。文章地址: https://vimsky.com/article/3673.html,未经允许,请勿转载。