首页
前端开发
iframe、embed 和 object 元素之间的区别

iframe、embed 和 object 元素之间的区别 [英] difference between iframe, embed and object elements

查看：49 发布时间：2021/12/21 22:35:49 html iframe

本文介绍了iframe、embed 和 object 元素之间的区别的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

HTML5 定义了几个嵌入的内容元素，从鸟瞰的角度来看，它们似乎非常相似，大致相同.

iframe、embed 和 object 之间的实际区别是什么?

如果我想嵌入来自第三方站点的 HTML 文件，我可以使用这些元素中的哪些元素，它们有何不同?

解决方案

</code></h1><块引用><p>iframe 元素表示嵌套的浏览上下文.<a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element" rel="noreferrer">HTML 5 标准 - "<code><iframe></code> 元素"</a></p></blockquote><p>主要用于包含来自其他域或子域的资源，但也可用于包含来自同一域的内容.<code><iframe></code> 的优势在于嵌入的代码是活的"并且可以与父文档通信.</p><h1><code><嵌入></code></h1><p>在 HTML 5 中标准化，在此之前它是一个非标准标签，公认所有主要浏览器都实现了它.HTML 5 之前的行为可能会有所不同......</p><块引用><p>embed 元素为外部(通常是非 HTML)应用程序或交互式内容提供了一个集成点.(<a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element" rel="noreferrer">HTML 5 标准 - <代码><embed></code> 元素"</a>)</p></blockquote><p>用于为浏览器插件嵌入内容.例外情况是 SVG 和 HTML 根据标准的不同处理方式.</p><p>关于嵌入内容可以做什么和不能做什么的细节取决于相关浏览器插件.但是对于 SVG，您可以使用以下内容从父级访问嵌入的 SVG 文档:</p><pre><code>svg = document.getElementById("parent_id").getSVGDocument();</code></pre><p>从嵌入的 SVG 或 HTML 文档中，您可以通过以下方式访问父级:</p><pre><code>parent = window.parent.document;</code></pre><p>对于嵌入的 HTML，无法从父级(我找到的)获取嵌入的文档.</p><h1><code><object></code></h1><块引用><p><code><object></code> 元素可以表示一个外部资源，根据资源的类型，该元素将被视为图像、嵌套浏览上下文或外部资源由插件处理的资源.(<a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element" rel="noreferrer">HTML 5 标准 - <代码><object></code> 元素"</a>)</p></blockquote><p><h1>结论</h1><p>除非您要嵌入 SVG 或静态内容，否则最好使用 <code><iframe></code>.要包含 SVG，请使用 <code><embed></code>(如果我没记错的话，<code><object></code> 不会让您编写脚本†).老实说，我不知道您为什么要使用 <code><object></code> 除非用于较旧的浏览器或 flash(我不使用).</p><p>† 正如下面的评论所指出的；<code><object></code> 中的脚本将运行，但父上下文和子上下文不能直接通信.使用 <code><embed></code> 您可以从父级获取子级的上下文，反之亦然.这意味着他们可以在父级中使用脚本来操作子级等.使用 <code><object></code> 或 <code><iframe></code> 这部分是不可能的，你必须这样做改为设置一些其他机制，例如 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" rel="noreferrer">JavaScript postMessage API</一>.</p><p>HTML5 defines several embedded content elements, which, from a bird's-eye view, seem to be very similar to the point of being largely identical.</p> <p>What is the actual difference between <code>iframe</code>, <code>embed</code> and <code>object</code>?</p> <p>If I want to embed an HTML file from a third-party site, which of these elements could I use, and how would they differ?</p><div class="h2_lin"> 解决方案 </div><p><h1><code><iframe></code></h1> </p><blockquote> <p>The iframe element represents a nested browsing context. <a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-iframe-element" rel="noreferrer">HTML 5 standard - "The <code><iframe></code> element"</a></p> </blockquote><p>Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well. The <code><iframe></code>'s strength is that the embedded code is 'live' and can communicate with the parent document.</p> <h1><code><embed></code></h1> <p>Standardised in HTML 5, before that it was a non standard tag, which admittedly was implemented by all major browsers. Behaviour prior to HTML 5 can vary ...</p><blockquote> <p>The embed element provides an integration point for an external (typically non-HTML) application or interactive content. (<a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-embed-element" rel="noreferrer">HTML 5 standard - "The <code><embed></code> element"</a>)</p> </blockquote><p>Used to embed content for browser plugins. Exceptions to this is SVG and HTML that are handled differently according to the standard.</p> <p>The details of what can and can not be done with the embedded content is up to the browser plugin in question. But for SVG you can access the embedded SVG document from the parent with something like:</p><pre><code>svg = document.getElementById("parent_id").getSVGDocument(); </code></pre><p>From inside an embedded SVG or HTML document you can reach the parent with:</p><pre><code>parent = window.parent.document; </code></pre><p>For embedded HTML there is no way to get at the embedded document from the parent (that I have found).</p> <h1><code><object></code></h1> </p><blockquote> <p>The <code><object></code> element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin. (<a href="http://www.w3.org/TR/html5/embedded-content-0.html#the-object-element" rel="noreferrer">HTML 5 standard - "The <code><object></code> element"</a>)</p> </blockquote><p> <h1>Conclusion</h1> <p>Unless you are embedding SVG or something static you are probably best of using <code><iframe></code>. To include SVG use <code><embed></code> (if I remember correctly <code><object></code> won't let you script†). Honestly I don't know why you would use <code><object></code> unless for older browsers or flash (that I don't work with).</p> <p>† As pointed out in the comments below; scripts in <code><object></code> will run but the parent and child contexts can't communicate directly. With <code><embed></code> you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc. That part is not possible with <code><object></code> or <code><iframe></code> where you would have to set up some other mechanism instead, such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage" rel="noreferrer">the JavaScript postMessage API</a>.</p> <p>这篇关于iframe、embed 和 object 元素之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2700844');">查看全文</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="iframe，嵌入和对象元素之间的区别" href="/880771.html"> iframe，嵌入和对象元素之间的区别; </a> </li> <li> <a target="_blank" title="null == object和object == null之间的区别" href="/537891.html"> null == object和object == null之间的区别; </a> </li> <li> <a target="_blank" title="var和Object之间的区别" href="/1399363.html"> var和Object之间的区别; </a> </li> <li> <a target="_blank" title="Object var和Object 之间的区别var = new Object（）" href="/471094.html"> Object var和Object 之间的区别var = new Object（）; </a> </li> <li> <a target="_blank" title="'object' 、{} 和 TypeScript 中的 Object 之间的区别" href="/2451148.html"> 'object' 、{} 和 TypeScript 中的 Object 之间的区别; </a> </li> <li> <a target="_blank" title="构造函数和Object之间的区别" href="/778555.html"> 构造函数和Object之间的区别; </a> </li> <li> <a target="_blank" title="LinkedList<?> 之间的区别和 LinkedList<Object>" href="/2755267.html"> LinkedList<?> 之间的区别和 LinkedList<Object>; </a> </li> <li> <a target="_blank" title="Change background color in PDF viewer using either embed, object or iframe methods" href="/2951390.html"> Change background color in PDF viewer using either embed, object or iframe methods; </a> </li> <li> <a target="_blank" title="object.src和object.getAttribute('src')之间的区别" href="/2238894.html"> object.src和object.getAttribute('src')之间的区别; </a> </li> <li> <a target="_blank" title="null！= object和object之间有什么区别！= null" href="/963210.html"> null！= object和object之间有什么区别！= null; </a> </li> <li> <a target="_blank" title="c ++：新的Object（）和Object（）之间的区别是什么？" href="/468072.html"> c ++：新的Object（）和Object（）之间的区别是什么？; </a> </li> <li> <a target="_blank" title="[Object，Object]与Array（2）之间的区别" href="/1981066.html"> [Object，Object]与Array（2）之间的区别; </a> </li> <li> <a target="_blank" title="Groovy - List，ArrayList和Object Array之间的区别" href="/837152.html"> Groovy - List，ArrayList和Object Array之间的区别; </a> </li> <li> <a target="_blank" title="使用（Object as TClass）和TClass（Object）之间有什么区别？" href="/504942.html"> 使用（Object as TClass）和TClass（Object）之间有什么区别？; </a> </li> <li> <a target="_blank" title="Object.create（Object.prototype），Object.create（Object）和Object.create（null）之间的区别" href="/1015057.html"> Object.create（Object.prototype），Object.create（Object）和Object.create（null）之间的区别; </a> </li> <li> <a target="_blank" title="XSD:元素和属性之间的区别" href="/2792955.html"> XSD:元素和属性之间的区别; </a> </li> <li> <a target="_blank" title="MyClass.prototype = new Object（）和MyClass.prototype = Object之间的区别" href="/906223.html"> MyClass.prototype = new Object（）和MyClass.prototype = Object之间的区别; </a> </li> <li> <a target="_blank" title="JavaScript中的新Object和新Object（）之间有什么区别" href="/1023626.html"> JavaScript中的新Object和新Object（）之间有什么区别; </a> </li> <li> <a target="_blank" title="在OBJECT中嵌入EMBED标记" href="/1065988.html"> 在OBJECT中嵌入EMBED标记; </a> </li> <li> <a target="_blank" title="Object.ToString()和Convert.ToString()之间的区别" href="/1428714.html"> Object.ToString()和Convert.ToString()之间的区别; </a> </li> <li> <a target="_blank" title="Objects.hashCode（）和new Object（）之间的区别.hashCode（）？" href="/979879.html"> Objects.hashCode（）和new Object（）之间的区别.hashCode（）？; </a> </li> <li> <a target="_blank" title="理解Object.create（）和new SomeFunction（）之间的区别" href="/1002867.html"> 理解Object.create（）和new SomeFunction（）之间的区别; </a> </li> <li> <a target="_blank" title="“Object[] x"和“Object[] x"之间有什么区别吗?和“对象 x[]"?" href="/2583509.html"> “Object[] x"和“Object[] x"之间有什么区别吗?和“对象 x[]"?; </a> </li> <li> <a target="_blank" title="null==object 和 object==null 的区别" href="/2774212.html"> null==object 和 object==null 的区别; </a> </li> <li> <a target="_blank" title="JSoup元素和JSoup节点之间的区别" href="/2156221.html"> JSoup元素和JSoup节点之间的区别; </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 = 'iframe,embed,和,object,元素,之间,的,区别'; 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>