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

查看：51 发布时间：2021/12/21 22:31:20 html iframe

本文介绍了使用 HTML5 替代 iFrame的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

推荐答案

基本上有 4 种方法可以将 HTML 嵌入网页:

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

</code></strong> iframe 的内容与您的页面完全不同.虽然这主要是一个很棒的功能，并且它在浏览器版本中是最兼容的，但它带来了额外的挑战(将框架的大小缩小到其内容是很困难的，脚本输入/输出非常令人沮丧，几乎不可能设置样式).</莉><li><strong>AJAX</strong>.正如此处显示的解决方案所证明的那样，您可以使用 <code>XMLHttpRequest</code> 对象来检索数据并将其注入您的页面.它并不理想，因为它依赖于脚本技术，从而使执行速度更慢且更复杂，其中包括 <a href="https://en.wikipedia.org/wiki/Ajax_%28programming%29#Drawbacks" rel="noreferrer">缺点</a>.</li><li><strong>黑客</strong>.这个问题中提到的很少，也不是很可靠.</li><li><p><strong>HTML5 网络组件</strong>.HTML 导入是 Web 组件的一部分，允许将 HTML 文档捆绑在其他 HTML 文档中.这包括 <code>HTML</code>、<code>CSS</code>、<code>JavaScript</code> 或 <code>.html</code> 文件可以包含的任何其他内容.这使其成为具有许多有趣用例的绝佳解决方案:将应用拆分为捆绑组件，您可以将这些组件作为构建块分发，更好地管理依赖项以避免冗余、代码组织等.这是一个简单的示例:<em class="showen"></em></ul> <ul class="en"> <li><strong><code><iframe></code></strong> 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).</li> <li><strong>AJAX</strong>. As the solutions shown here prove, you can use the <code>XMLHttpRequest</code> 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.</li> <li><strong>Hacks</strong>. Few mentioned in this question and not very reliable.</li> <li><p><strong>HTML5 Web Components</strong>. HTML Imports, part of the Web Components, allows to bundle HTML documents in other HTML documents. That includes <code>HTML</code>, <code>CSS</code>, <code>JavaScript</code> or anything else an <code>.html</code> 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:</ul> <pre><code><code> <link rel="import" href="http://example.com/elements.html"> </code></code></pre> <p class="cn"></li></p> <p class="cn"><a href="http://caniuse.com/#search=web%20components" rel="noreferrer">本机兼容性</a> 仍然是一个问题，但您可以使用 <a href="https://www.polymer-project.org/1.0/" rel="noreferrer">polyfill</a> 使其在 <a href="http://bluespire.com/eisenbergeffect/blog/2014/中工作02/17/evergreen-browsers/" rel="noreferrer">常青浏览器</a>今天.<em class="showen"></em></p> <p class="en">Native compatibility is still an issue, but you can use a polyfill to make it work in evergreen browsers Today.</p> <p class="cn">您可以在<a href="http://www.html5rocks.com/en/tutorials/webcomponents/imports/" rel="noreferrer">此处</a>和<a href="http://webcomponents.org/" rel="noreferrer">这里</a>.</p> <p>这篇关于使用 HTML5 替代 iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2700811');">查看全文</span> </div> </div> <div> </div> <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div> </div> </article> <div id="arc-ad-2" class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="widget bgwhite radius-1 mb-1 shadow widget-rel"> <h5>相关文章</h5> <ul> <li> <a target="_blank" title="替代使用HTML5的iFrame" href="/880668.html"> 替代使用HTML5的iFrame; </a> </li> <li> <a target="_blank" title="使用 iframe 替代 html5 中的框架" href="/2701001.html"> 使用 iframe 替代 html5 中的框架; </a> </li> <li> <a target="_blank" title="使用iframe替代html5中的帧" href="/881599.html"> 使用iframe替代html5中的帧; </a> </li> <li> <a target="_blank" title="HTML5：iframe没有滚动？" href="/880913.html"> HTML5：iframe没有滚动？; </a> </li> <li> <a target="_blank" title="HTML5:iframe 没有滚动?" href="/2700929.html"> HTML5:iframe 没有滚动?; </a> </li> <li> <a target="_blank" title="HTML5 iFrame 无缝属性" href="/2623076.html"> HTML5 iFrame 无缝属性; </a> </li> <li> <a target="_blank" title="HTML5如何“替代"?闪光?" href="/2693358.html"> HTML5如何“替代"?闪光?; </a> </li> <li> <a target="_blank" title="HTML5如何“替代”闪？" href="/763352.html"> HTML5如何“替代”闪？; </a> </li> <li> <a target="_blank" title="HTML5 Colspan - 替代方案" href="/871177.html"> HTML5 Colspan - 替代方案; </a> </li> <li> <a target="_blank" title="HTML5 FileReader替代方案" href="/880930.html"> HTML5 FileReader替代方案; </a> </li> <li> <a target="_blank" title="HTML5的iFrame无缝属性" href="/303647.html"> HTML5的iFrame无缝属性; </a> </li> <li> <a target="_blank" title="在HTML5中扩展iframe" href="/881583.html"> 在HTML5中扩展iframe; </a> </li> <li> <a target="_blank" title="HTML5 iframe:阻止远程请求" href="/2126814.html"> HTML5 iframe:阻止远程请求; </a> </li> <li> <a target="_blank" title="爪哇 - HTML5替代的JEditorPane" href="/342062.html"> 爪哇 - HTML5替代的JEditorPane; </a> </li> <li> <a target="_blank" title="带有HTML5内容的HTML 4 iframe" href="/883980.html"> 带有HTML5内容的HTML 4 iframe; </a> </li> <li> <a target="_blank" title="在HTML 5中iframe的替代方式" href="/1159114.html"> 在HTML 5中iframe的替代方式; </a> </li> <li> <a target="_blank" title="在HTML5应用程序中使用IFRAME" href="/552059.html"> 在HTML5应用程序中使用IFRAME; </a> </li> <li> <a target="_blank" title="HTML5 localStorage的替代品" href="/2271032.html"> HTML5 localStorage的替代品; </a> </li> <li> <a target="_blank" title="iframe visual studio html5 windows 8 app" href="/892887.html"> iframe visual studio html5 windows 8 app; </a> </li> <li> <a target="_blank" title="HTML5 iFrame沙箱可以统计视图吗？" href="/810955.html"> HTML5 iFrame沙箱可以统计视图吗？; </a> </li> <li> <a target="_blank" title="HTML5调整嵌套iframe中顶级文档iframe的大小" href="/563511.html"> HTML5调整嵌套iframe中顶级文档iframe的大小; </a> </li> <li> <a target="_blank" title="使用Javascript将HTML5沙箱属性添加到iframe" href="/881756.html"> 使用Javascript将HTML5沙箱属性添加到iframe; </a> </li> <li> <a target="_blank" title="如何使用 Youtube 的 HTML5 iframe API 设置 wmode=opaque?" href="/2558682.html"> 如何使用 Youtube 的 HTML5 iframe API 设置 wmode=opaque?; </a> </li> <li> <a target="_blank" title="如何使用Youtube的HTML5 iframe API设置wmode = opaque?" href="/2270912.html"> 如何使用Youtube的HTML5 iframe API设置wmode = opaque?; </a> </li> <li> <a target="_blank" title="框架在HTML5中不推荐使用，但不使用iFrame" href="/863735.html"> 框架在HTML5中不推荐使用，但不使用iFrame; </a> </li> </ul> </div> <div class="mb-1"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5038752844014834" data-ad-slot="3921941283"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="side"> <div class="widget widget-side bgwhite mb-1 shadow"> <h5>前端开发最新文章</h5> <ul> <li> <a target="_blank" title="为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？" href="/1996151.html"> 为什么Chrome（在Electron内部）突然重定向到chrome-error：// chromewebdata？; </a> </li> <li> <a target="_blank" title="错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接" href="/749568.html"> 错误102（net :: ERR_CONNECTION_REFUSED）：服务器拒绝连接; </a> </li> <li> <a target="_blank" title="如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？" href="/1009885.html"> 如何解决'重定向已被CORS策略阻止：没有'Access-Control-Allow-Origin'标题'？; </a> </li> <li> <a target="_blank" title="如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？" href="/884909.html"> 如何处理“Uncaught（in promise）DOMException：play（）失败，因为用户没有首先与文档交互。”在桌面上使用Chrome 66？; </a> </li> <li> <a target="_blank" title="警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件" href="/818517.html"> 警告：添加非被动事件侦听器到滚动阻塞'touchstart'事件; </a> </li> <li> <a target="_blank" title="如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？" href="/343346.html"> 如何在浏览器中播放.TS文件（视频/ MP2T媒体类型）？; </a> </li> <li> <a target="_blank" title="此请求已被阻止;内容必须通过HTTPS提供" href="/886417.html"> 此请求已被阻止;内容必须通过HTTPS提供; </a> </li> <li> <a target="_blank" title="资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）" href="/562873.html"> 资源解释为样式表，但转换为MIME类型text / html（似乎与web服务器无关）; </a> </li> <li> <a target="_blank" title="通过HTTPS加载页面但请求不安全的XMLHttpRequest端点" href="/885901.html"> 通过HTTPS加载页面但请求不安全的XMLHttpRequest端点; </a> </li> <li> <a target="_blank" title="拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html"> 拒绝从执行脚本'*'，因为它的MIME类型（“应用/ JSON'）不是可执行文件，并严格MIME类型检查被启用。; </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门教程 </h5> <ul> <li> <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html"> Java教程 </a> </li> <li> <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html"> Apache ANT 教程 </a> </li> <li> <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html"> Kali Linux教程 </a> </li> <li> <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html"> JavaScript教程 </a> </li> <li> <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html"> JavaFx教程 </a> </li> <li> <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html"> MFC 教程 </a> </li> <li> <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html"> Apache HTTP客户端教程 </a> </li> <li> <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html"> Microsoft Visio 教程 </a> </li> </ul> </div> <div class="widget widget-side bgwhite mb-1 shadow"> <h5> 热门工具 </h5> <ul> <li> <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4"> Java 在线工具 </a> </li> <li> <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6"> C(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8"> PHP 在线工具 </a> </li> <li> <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1"> C# 在线工具 </a> </li> <li> <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5"> Python 在线工具 </a> </li> <li> <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33"> MySQL 在线工具 </a> </li> <li> <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2"> VB.NET 在线工具 </a> </li> <li> <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14"> Lua 在线工具 </a> </li> <li> <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35"> Oracle 在线工具 </a> </li> <li> <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7"> C++(GCC) 在线工具 </a> </li> <li> <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20"> Go 在线工具 </a> </li> <li> <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45"> Fortran 在线工具 </a> </li> </ul> </div> </div> </div> <script type="text/javascript">var eskeys = '使用,html5,替代,iframe'; var cat = 'cc';';//qianduan</script> </div> <div id="pop" onclick="pophide();"> <div id="pop_body" onclick="event.stopPropagation();"> <h6 class="flex flex101"> 登录 <span onclick="pophide();">关闭</span> </h6> <div class="pd-1"> <div class="wxtip center"> <span>扫码关注<em>1秒</em>登录</span> </div> <div class="center"> <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" /> </div> <div style="margin-top:10px;display:flex;justify-content: center;"> <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" /> <input id="btngo" type="button" onclick="chk()" value="GO" /> </div> <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;"> 发送“验证码”获取 <em style="padding: 0 .5rem;">|</em> <span style="color: #01a05c;">15天全站免登陆</span> </div> <div id="chkinfo" class="tip"></div> </div> </div> </div> <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script> <script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script> <footer class="footer"> <div class="container"> <div class="flink mb-1"> 友情链接： <a href="https://www.it1352.com/" target="_blank">IT屋</a> <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a> <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a> </div> <section class="copyright-section"> <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a> ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a> <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a> <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a> <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a> <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a> 本站内容来源互联网,如果侵犯您的权益请联系我们删除. </section>  <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script type="text/javascript"> (function () { var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> </body> </html>