访问 <iframe> 的最简洁的跨浏览器方式是什么?元素的窗口和文档? [英] What's the most concise cross-browser way to access an <iframe> element's window and document?

查看：18 发布时间：2021/12/21 22:52:07 javascript dom iframe cross-browser document

本文介绍了访问 <iframe> 的最简洁的跨浏览器方式是什么?元素的窗口和文档?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试找出从父页面访问 </code> 元素的 <code>window</code> 和 <code>document</code> 属性的最佳方式.<code><iframe></code> 可以通过 JavaScript 创建或通过存储在对象属性或变量中的引用访问，因此，如果我理解正确，则排除使用 <code>document.frames</code>.<em class="showen"></em></p> <p class="en">I'm trying to figure out the best way to access an <code><iframe></code> element's <code>window</code> and <code>document</code> properties from a parent page. The <code><iframe></code> may be created via JavaScript or accessed via a reference stored in an object property or a variable, so, if I understand correctly, that rules out the use of <code>document.frames</code>.</p> <p class="cn">我已经看到有多种方法可以做到这一点，但我不确定最好的方法.给定一个以这种方式创建的 <code><iframe></code>:<em class="showen"></em></p> <p class="en">I've seen this done a number of ways, but I'm unsure about the best approach. Given an <code><iframe></code> created in this way:</p> <pre><code><code>var iframe = document.createElement('iframe'); document.getElementsByTagName('body')[0].appendChild(iframe); </code></code></pre> <p class="cn">我目前正在使用它来访问 <code>document</code>，它似乎可以在主要浏览器中正常工作:<em class="showen"></em></p> <p class="en">I'm currently using this to access the <code>document</code>, and it seems to work OK across the major browsers:</p> <pre><code><code>var doc = iframe.contentWindow || iframe.contentDocument; if (doc.document) { doc = doc.document; } </code></code></pre> <p class="cn">我也看到过这种方法:</p> <pre><code><code>var iframe = document.getElementById('my_iframe'); iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument; iframe.document.open(); iframe.document.write('Hello World!'); iframe.document.close(); </code></code></pre> <p class="cn">这让我很困惑，因为似乎如果定义了 <code>iframe.contentDocument.document</code>，您最终将尝试访问 <code>iframe.contentDocument.document.document</code>.<em class="showen"></em></p> <p class="en">That confuses me, since it seems that if <code>iframe.contentDocument.document</code> is defined, you're going to end up trying to access <code>iframe.contentDocument.document.document</code>.</p> <p class="cn">还有这个:</p> <pre><code><code>var frame_ref = document.getElementsByTagName('iframe')[0]; var iframe_doc = frame_ref.contentWindow ? frame_ref.contentWindow.document : frame_ref.contentDocument; </code></code></pre> <p class="cn">最后，我想我对哪些属性持有哪些属性感到困惑，<code>contentDocument</code> 是否等同于 <code>document</code> 或是否有这样的属性 <代码>contentDocument.document</code>等<em class="showen"></em></p> <p class="en">In the end, I guess I'm confused as to which properties hold which properties, whether <code>contentDocument</code> is equivalent to <code>document</code> or whether there is such a property as <code>contentDocument.document</code>, etc.</p> <p class="cn">任何人都可以向我指出有关这些属性的准确/及时的参考资料，或简要介绍如何有效访问 <code><iframe></code> 的 <code>window</code> 和以跨浏览器的方式<code>document</code> 属性(不使用 jQuery 或其他库)?<em class="showen"></em></p> <p class="en">Can anyone point me to an accurate/timely reference on these properties, or give a quick briefing on how to efficiently access an <code><iframe></code>'s <code>window</code> and <code>document</code> properties in a cross-browser way (without the use of jQuery or other libraries)?</p> <p class="cn">感谢您的帮助！</p> <h3 class="best_ans mt-1">推荐答案</h3> <p class="cn">在此期间我做了很多测试，最后想出了这个简短但强大的语法，它适用于我可以测试的每个浏览器:<em class="showen"></em></p> <p class="en">During the time I made many tests, and finally came up with this short but robust syntax which works on every browser I could test:</p> <pre><code><code><strike>var doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow.document || iframe.document);</strike></code></code></pre> <p class="cn"><strong></strong> @DaggNabbit 注意到 <code>iframe.contentWindow.document</code> 中的引用错误，如果 <code>iframe.contentWindow</code> 未设置，则会阻止代码执行，不允许返回<code>iframe.document</code>.<br/>所以我改进了我的代码:<em class="showen"></em></p> <p class="en"><strong></strong> @DaggNabbit noticed that a reference error in <code>iframe.contentWindow.document</code>, if <code>iframe.contentWindow</code> is not set, would block the code execution, not allowing <code>iframe.document</code> to be returned.<br /> So I refined my code:</p> <pre><code><code>var doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow ? iframe.contentWindow.document : iframe.document); </code></code></pre> <p class="cn">注意:<code>iframe.document</code> 是 IE5 的解决方法.<em class="showen"></em></p> <p class="en">NOTE: <code>iframe.document</code> is a workaround for IE5.</p> <p>这篇关于访问 &lt;iframe&gt; 的最简洁的跨浏览器方式是什么?元素的窗口和文档?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="arc-body-main-more"> <span onclick="unlockarc('2700959');">查看全文</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="什么是最简洁的跨浏览器方式访问&lt; iframe&gt;元素的窗口和文档？" href="/557175.html"> 什么是最简洁的跨浏览器方式访问&lt; iframe&gt;元素的窗口和文档？; </a> </li> <li> <a target="_blank" title="如何访问&lt;IFRAME&gt;中的元素?" href="/2490768.html"> 如何访问&lt;IFRAME&gt;中的元素?; </a> </li> <li> <a target="_blank" title="&lt; iframe&gt; javascript访问父DOM跨域？" href="/557985.html"> &lt; iframe&gt; javascript访问父DOM跨域？; </a> </li> <li> <a target="_blank" title="&lt;iframe&gt;javascript 跨域访问父DOM?" href="/2684358.html"> &lt;iframe&gt;javascript 跨域访问父DOM?; </a> </li> <li> <a target="_blank" title="&LT; IFRAME&GT;什么都有好处？" href="/1066301.html"> &LT; IFRAME&GT;什么都有好处？; </a> </li> <li> <a target="_blank" title="整页&lt; iframe&gt;" href="/892455.html"> 整页&lt; iframe&gt;; </a> </li> <li> <a target="_blank" title="“全屏” &LT; IFRAME&GT;" href="/860956.html"> “全屏” &LT; IFRAME&GT;; </a> </li> <li> <a target="_blank" title="“全屏"&lt;iframe&gt;" href="/2700837.html"> “全屏"&lt;iframe&gt;; </a> </li> <li> <a target="_blank" title="拖放跨域，iframe，浏览器窗口" href="/558204.html"> 拖放跨域，iframe，浏览器窗口; </a> </li> <li> <a target="_blank" title="最简单的检索跨浏览器XmlHtt prequest方式" href="/47219.html"> 最简单的检索跨浏览器XmlHtt prequest方式; </a> </li> <li> <a target="_blank" title="是&lt; iframe&gt;之间的关系它的文档是一种方式吗？" href="/652389.html"> 是&lt; iframe&gt;之间的关系它的文档是一种方式吗？; </a> </li> <li> <a target="_blank" title="“访问被拒绝”尝试访问以编程方式创建的&lt; iframe&gt;的文档对象时出现JavaScript错误（仅IE）" href="/650973.html"> “访问被拒绝”尝试访问以编程方式创建的&lt; iframe&gt;的文档对象时出现JavaScript错误（仅IE）; </a> </li> <li> <a target="_blank" title="“访问被拒绝"尝试访问以编程方式创建的 &lt;iframe&gt; 的文档对象时出现 JavaScript 错误(仅限 IE)" href="/2683933.html"> “访问被拒绝"尝试访问以编程方式创建的 &lt;iframe&gt; 的文档对象时出现 JavaScript 错误(仅限 IE); </a> </li> <li> <a target="_blank" title="如何引用&lt; iframe&gt;的文档对象？从父页面，使用jQuery？" href="/892387.html"> 如何引用&lt; iframe&gt;的文档对象？从父页面，使用jQuery？; </a> </li> <li> <a target="_blank" title="创建跨浏览器Gmail扩展程序的最佳方式是什么？" href="/763056.html"> 创建跨浏览器Gmail扩展程序的最佳方式是什么？; </a> </li> <li> <a target="_blank" title="检测&lt; iframe&gt; iframe中的高度和宽度" href="/864947.html"> 检测&lt; iframe&gt; iframe中的高度和宽度; </a> </li> <li> <a target="_blank" title="使用JavaScript更改&lt; iframe&gt;的来源" href="/867052.html"> 使用JavaScript更改&lt; iframe&gt;的来源; </a> </li> <li> <a target="_blank" title="设置&lt; iframe&gt;的HTTP请求类型" href="/872825.html"> 设置&lt; iframe&gt;的HTTP请求类型; </a> </li> <li> <a target="_blank" title="最简洁的方式来组合序列元素" href="/781407.html"> 最简洁的方式来组合序列元素; </a> </li> <li> <a target="_blank" title="为什么不会&lt; iframe&gt;元素在HTML 4.01中验证？" href="/873530.html"> 为什么不会&lt; iframe&gt;元素在HTML 4.01中验证？; </a> </li> <li> <a target="_blank" title="禁用&lt; iframe&gt; onclick暂停" href="/883512.html"> 禁用&lt; iframe&gt; onclick暂停; </a> </li> <li> <a target="_blank" title="ckeditor 添加 &lt;iframe&gt;编辑器中的标签" href="/2740003.html"> ckeditor 添加 &lt;iframe&gt;编辑器中的标签; </a> </li> <li> <a target="_blank" title="如何访问Iframe的父窗口的方法[Chrome浏览器]" href="/873855.html"> 如何访问Iframe的父窗口的方法[Chrome浏览器]; </a> </li> <li> <a target="_blank" title="如何访问&lt; iframe&gt;身体使用c ++ / ATL / COM？" href="/534593.html"> 如何访问&lt; iframe&gt;身体使用c ++ / ATL / COM？; </a> </li> <li> <a target="_blank" title="如何访问&lt; iframe&gt;身体使用c ++ / ATL / COM？" href="/495804.html"> 如何访问&lt; iframe&gt;身体使用c ++ / ATL / COM？; </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 = '访问,lt,iframe&gt,的,最,简洁,的,跨,浏览器,方式,是什么,元素,的,窗口,和,文档'; 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>

访问 &lt;iframe&gt; 的最简洁的跨浏览器方式是什么?元素的窗口和文档? [英] What&#39;s the most concise cross-browser way to access an &lt;iframe&gt; element&#39;s window and document?

问题描述

访问 <iframe> 的最简洁的跨浏览器方式是什么?元素的窗口和文档? [英] What's the most concise cross-browser way to access an <iframe> element's window and document?