替代使用HTML5的iFrame [英] Alternative to iFrames with HTML5

问题描述

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

解决方案

<基本上有4种方法可以将HTML嵌入到网页中：

• < iframe> iframe的内容完全位于与您的网页不同的上下文中。虽然这主要是一个很棒的功能，并且它是浏览器版本中最兼容的，但它带来了额外的挑战（缩小了框架大小以适应其内容的难度，令人沮丧的脚本进出，几乎不可能）。 li>
  
• AJAX 。正如这里所示的解决方案所证明的那样，您可以使用 XMLHttpRequest 对象来检索数据并将其注入到页面中。它不是理想的，因为它依赖于脚本技术，从而使执行更慢更复杂，其他缺点。


• 黑客。很少有人在这个问题中提到过，并且不太可靠。
HTML5网页组件。作为Web组件的一部分的HTML Imports允许将HTML文档捆绑到其他HTML文档中。这包括 HTML ， CSS ， JavaScript 或其他任何东西 .html 文件可以包含。这使得它成为一个很好的解决方案，有许多有趣的用例：将应用程序拆分为可以作为构建块分发的捆绑组件，更好地管理依赖关系以避免冗余，代码组织等。这是一个简单的例子：

 <！ - 其他来源的资源必须启用CORS。 - > 
< link rel =importhref =http://example.com/elements.html> 
  

正常兼容性仍然是一个问题，但您可以使用 polyfill ，使其在常青树浏览器中工作。

您可以通过此处和这里。

I would like to know if there is an alternative to iFrames with HTML5. I mean by that, be able able to inject cross-domains HTML inside of a webpage without using an iFrame.

解决方案

Basically there are 4 ways to embed HTML into a web page:

• <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 showed 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:

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

Native compatibility is still an issue, but you can use a polyfill to make it work in evergreen browsers Today.

You can learn more here and here.

这篇关于替代使用HTML5的iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！