首页 > 解决方案 > 无法访问 DOM tag</p> </div> <div class="container" id="article"> <div class="page-header"> <h1>javascript - 无法访问 DOM<iframe> tag</h1> </div> <div class="con"> <h3>问题描述</h3> <p>I am trying to load HTML markup from a separate file placed in the same directory. To achieve that, I am following this article: <a href="https://www.filamentgroup.com/lab/html-includes/" rel="nofollow noreferrer">HTML Includes That Work Today</a>.</p>
<p>I have two files with the following contents:<br />
<code>page2.html</code>:</p>
<pre class="lang-html prettyprint-override"><code><html>
 <style>
 div {
 display: inline-block;
 background-color: #0902;
 border: 2px solid green;
 border-radius: 10px;
 padding: 20px;
 font-size: 1.2em;
 }
 </style>
 <body>
 <div id="x">Contents</div>
 </body>
</html>
</code></pre>
<p><code>test.html</code>:</p>
<pre class="lang-html prettyprint-override"><code><html>
 <body>
 <iframe src="page2.html" style="display: none;" onload="alert('onload event called'); this.before(this.contentDocument.body.children[0]); this.remove();"></iframe>
 </body>
</html>
</code></pre>
<p>I want the contents of <code>page2.html</code> to get appended to the current document. But, I am getting:</p>
<pre><code>Uncaught TypeError: Cannot read property 'body' of null
 at HTMLIFrameElement.onload (test.html:10)
</code></pre>
<p>What mistake have I made?</p>
<p class="author">标签： <span>javascript</span><span>html</span></div> <h3>解决方案</h3> <hr> <div class="con "> <div class="body"> <p>这是一个跨域问题。</p> <p>框架不允许您访问不同来源的页面的 DOM。</p> <p>当您从本地文件打开 HTML 文档时，Chrome 会报告您看到的错误。</p> <p>本地文件总是被视为不同的来源（想象一下，如果有人通过电子邮件向您发送 HTML 文档，您双击它，您的电子邮件客户端将其保存到本地文件并在浏览器中打开，然后开始从硬盘读取文件并将它们发送到电子邮件的发件人）。</p> <p>您需要通过 HTTP 访问这些文档。</p> </div> <div class="clear"></div> </div> <hr> <h3>推荐阅读</h3> <ul> <li><a href="/question/59662334.html">python - python numpy创建数据集列：仅根据条件添加值，否则为null</a></li><li><a href="/question/59662337.html">excel - 如何根据具有可变位置的另一个单元格设置单元格值</a></li><li><a href="/question/59662339.html">reactjs - 如何使用 React 测试库测试 Material UI 选择组件</a></li><li><a href="/question/59662340.html">python - 在 Python (Selenium) 中从 CSV 文件读取和写入变量</a></li><li><a href="/question/59662343.html">reactjs - 无法从 Spring Boot 应用程序在浏览器中设置 HTTP Cookie</a></li><li><a href="/question/59662346.html">css - 使用 CSS 网格重复模拟内联块，但防止占用未使用的空白</a></li><li><a href="/question/59662349.html">data-science - 这个 P 论点有什么问题</a></li><li><a href="/question/59662352.html">javascript - 如何让 babel-node 将 Workers 引用的文件转换为 commonjs？（就像 babel 一样）</a></li><li><a href="/question/59662360.html">php - 想要将 quickbooks 桌面与 php 集成</a></li><li><a href="/question/59662361.html">firebase - Firebase 实时数据库连接作为流可以保持多长时间？</a></li> </ul> </div> <footer> <p><a href="/">时间戳在线转换</a></p> </footer> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6117966252207595" crossorigin="anonymous"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?7145e10314e5e27e886ad54be2aeb067"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </body></html>