如何在 Javascript 中获取 iframe 的正文内容? [英] How to get the body's content of an iframe in Javascript?

查看：32 发布时间：2021/12/1 12:55:43 javascript html iframe
本文介绍了如何在 Javascript 中获取 iframe 的正文内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

<html>&lt;头&gt;&lt;/头&gt;&lt;body class="frameBody"&gt;测试&lt;br/&gt;</body></html>&lt;/iframe&gt;</code></pre><p>我想得到的是:</p><pre><code>test<br/></code></pre><p></p><div class="h2_lin"> 解决方案 </div><p>确切的问题是如何使用纯 JavaScript 而不是 jQuery.</p><p>但我总是使用可以在 jQuery 源代码中找到的解决方案.它只是一行原生 JavaScript.</p><p>对我来说，这是最好的、易读的，甚至是<em>afaik</em>获取 iframe 内容的最短方法.</p><p><strong>首先获取您的 iframe</strong></p><pre><code>var iframe = document.getElementById('id_description_iframe');//或者var iframe = document.querySelector('#id_description_iframe');</code></pre><p><strong>然后使用jQuery的解决方案</strong></p><pre><code>var iframeDocument = iframe.contentDocument ||iframe.contentWindow.document;</code></pre><p><块引用><p>它甚至可以在 Internet Explorer 中工作，它在 <code>iframe</code> 对象的 <code>contentWindow</code> 属性期间执行此技巧.大多数其他浏览器使用 <code>contentDocument</code> 属性，这就是我们在此 OR 条件中首先证明此属性的原因.如果未设置，请尝试 <code>contentWindow.document</code>.</p></blockquote><p><strong>选择 iframe 中的元素</strong></p><p>然后你通常可以使用 <code>getElementById()</code> 甚至 <code>querySelectorAll()</code> 从 <code>iframeDocument</code> 中选择 DOM-Element:</p><pre><code>if (!iframeDocument) {抛出在 DOM 中找不到 iframe.";}var iframeContent = iframeDocument.getElementById('frameBody');//或者var iframeContent = iframeDocument.querySelectorAll('#frameBody');</code></pre><p><strong>在 iframe 中调用函数</strong></p><p>仅从 <code>iframe</code> 中获取 <code>window</code> 元素以调用一些全局函数、变量或整个库(例如 <code>jQuery</code>):</p><pre><code>var iframeWindow = iframe.contentWindow;//你甚至可以调用 jQuery 或其他框架//如果它是在 iframe 中加载的iframeContent = iframeWindow.jQuery('#frameBody');//或者iframeContent = iframeWindow.$('#frameBody');//甚至使用任何其他全局变量iframeWindow.myVar = window.myVar;//或者调用一个全局函数var myVar = iframeWindow.myFunction(param1/*, ... */);</code></pre><p><strong>注意</strong></p><p>如果您遵守<a href="http://en.wikipedia.org/wiki/Same-origin_policy" rel="noreferrer">同源政策</a>，这一切都是可能的.</p></p><pre><code>&lt;iframe id="id_description_iframe" class="rte-zone" height="200" frameborder="0" title="description"&gt;
  &lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;body class="frameBody"&gt;
      test&lt;br/&gt;
    &lt;/body&gt;
  &lt;/html&gt;
&lt;/iframe&gt;
</code></pre><p>What I want to get is:</p><pre><code>test&lt;br/&gt;
</code></pre><p>
</p><div class="h2_lin"> 解决方案 </div><p>The exact question is how to do it with pure JavaScript not with jQuery.</p>

<p>But I always use the solution that can be found in jQuery's source code.
It's just one line of native JavaScript.</p>

<p>For me it's the best, easy readable and even <em>afaik</em> the shortest way to get the iframes content.</p>

<p><strong>First get your iframe</strong></p><pre><code>var iframe = document.getElementById('id_description_iframe');

// or
var iframe = document.querySelector('#id_description_iframe');
</code></pre><p><strong>And then use jQuery's solution</strong></p><pre><code>var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
</code></pre><p>

</p><blockquote>
  <p>It works even in the Internet Explorer which does this trick during the <code>contentWindow</code> property of the <code>iframe</code> object. Most other browsers uses the <code>contentDocument</code> property and that is the reason why we proof this property first in this OR condition. If it is not set try <code>contentWindow.document</code>.</p>
</blockquote><p><strong>Select elements in iframe</strong></p>

<p>Then you can usually use <code>getElementById()</code> or even <code>querySelectorAll()</code> to select the DOM-Element from the <code>iframeDocument</code>:</p><pre><code>if (!iframeDocument) {
    throw "iframe couldn't be found in DOM.";
}

var iframeContent = iframeDocument.getElementById('frameBody');

// or
var iframeContent = iframeDocument.querySelectorAll('#frameBody');
</code></pre><p><strong>Call functions in the iframe</strong></p>

<p>Get just the <code>window</code> element from <code>iframe</code> to call some global functions, variables or whole libraries (e.g. <code>jQuery</code>):</p><pre><code>var iframeWindow = iframe.contentWindow;

// you can even call jQuery or other frameworks
// if it is loaded inside the iframe
iframeContent = iframeWindow.jQuery('#frameBody');

// or
iframeContent = iframeWindow.$('#frameBody');

// or even use any other global variable
iframeWindow.myVar = window.myVar;

// or call a global function
var myVar = iframeWindow.myFunction(param1 /*, ... */);
</code></pre><p><strong>Note</strong></p>

<p>All this is possible if you observe the <a href="http://en.wikipedia.org/wiki/Same-origin_policy" rel="noreferrer">same-origin policy</a>.</p>

                        <p>这篇关于如何在 Javascript 中获取 iframe 的正文内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2626808');">查看全文</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="如何在JavaScript中获取iframe的内容？" href="/860402.html">
                            如何在JavaScript中获取iframe的内容？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="覆盖 iframe 中内容的正文样式" href="/2627735.html">
                            覆盖 iframe 中内容的正文样式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="覆盖iframe中内容的正文样式" href="/892076.html">
                            覆盖iframe中内容的正文样式;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 PHP 中获取请求内容(正文)?" href="/2772234.html">
                            如何在 PHP 中获取请求内容(正文)?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在PHP中获取请求内容(正文)?" href="/1745154.html">
                            如何在PHP中获取请求内容(正文)?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用javascript获取iFrame src内容？" href="/892261.html">
                            如何使用javascript获取iFrame src内容？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 Laravel 中获取 HTTP 请求正文内容?" href="/2501164.html">
                            如何在 Laravel 中获取 HTTP 请求正文内容?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用纯JavaScript获取Iframe的内容" href="/892147.html">
                            使用纯JavaScript获取Iframe的内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用纯 JavaScript 获取 iframe 的内容" href="/2700937.html">
                            使用纯 JavaScript 获取 iframe 的内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在Javascript的iframe元素中获取元素?" href="/2264654.html">
                            如何在Javascript的iframe元素中获取元素?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用javascript在iframe中获取网页的整个文本内容" href="/2273253.html">
                            如何使用javascript在iframe中获取网页的整个文本内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="获取iframe的内容" href="/867499.html">
                            获取iframe的内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="获取iframe的内容" href="/1025859.html">
                            获取iframe的内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Chrome：获取iFrame并插入正文" href="/818617.html">
                            Chrome：获取iFrame并插入正文;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="来自javascript的iframe内容" href="/892220.html">
                            来自javascript的iframe内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="来自 javascript 的 iframe 内容" href="/2701124.html">
                            来自 javascript 的 iframe 内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在iframe中打印特定内容" href="/1020316.html">
                            如何在iframe中打印特定内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何使用WATIN在iframe中获取内容" href="/1197951.html">
                            如何使用WATIN在iframe中获取内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何从iframe获取内容类型?" href="/1837066.html">
                            如何从iframe获取内容类型?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在PHP中使用IMAP来获取邮件正文内容?" href="/1744803.html">
                            如何在PHP中使用IMAP来获取邮件正文内容?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在 php 中获取 POST 的正文?" href="/2870121.html">
                            如何在 php 中获取 POST 的正文?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何在php中获取POST的正文?" href="/1740893.html">
                            如何在php中获取POST的正文?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="使用JavaScript中的动态内容填充IFRAME" href="/892199.html">
                            使用JavaScript中的动态内容填充IFRAME;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery/JavaScript:访问 iframe 的内容" href="/2625261.html">
                            jQuery/JavaScript:访问 iframe 的内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="jQuery / JavaScript：访问iframe的内容" href="/892069.html">
                            jQuery / JavaScript：访问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="如何解决&#39;重定向已被CORS策略阻止：没有&#39;Access-Control-Allow-Origin&#39;标题&#39;？" href="/1009885.html">
                            如何解决&#39;重定向已被CORS策略阻止：没有&#39;Access-Control-Allow-Origin&#39;标题&#39;？;
                        </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="警告：添加非被动事件侦听器到滚动阻塞&#39;touchstart&#39;事件" href="/818517.html">
                            警告：添加非被动事件侦听器到滚动阻塞&#39;touchstart&#39;事件;
                        </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="拒绝从执行脚本&#39;*&#39;，因为它的MIME类型（“应用/ JSON&#39;）不是可执行文件，并严格MIME类型检查被启用。" href="/47347.html">
                            拒绝从执行脚本&#39;*&#39;，因为它的MIME类型（“应用/ JSON&#39;）不是可执行文件，并严格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 = '如,何在,javascript,中,获取,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>
如何在 Javascript 中获取 iframe 的正文内容? [英] How to get the body&#39;s content of an iframe in Javascript?

问题描述

如何在 Javascript 中获取 iframe 的正文内容? [英] How to get the body's content of an iframe in Javascript?
