无法从 <iframe> 标签访问 DOM [重复]答案

【问题标题】：Cannot access the DOM from <iframe> tag [duplicate]无法从 <iframe> 标签访问 DOM [重复]
【发布时间】：2021-03-12 11:43:00
【问题描述】：

我正在尝试从放置在同一目录中的单独文件加载 HTML 标记。为此，我正在关注这篇文章：HTML Includes That Work Today。

我有两个文件，内容如下：
page2.html:

<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>

test.html:

<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>

我希望将page2.html 的内容附加到当前文档中。但是，我得到：

Uncaught TypeError: Cannot read property 'body' of null
    at HTMLIFrameElement.onload (test.html:10)

我犯了什么错误？

【问题讨论】：

标签： javascript html

【解决方案1】：

这是一个跨域问题。

框架不允许您访问不同来源页面的 DOM。

当您从本地文件打开 HTML 文档时，Chrome 会报告您看到的错误。

本地文件总是被视为不同的来源（想象一下，如果有人通过电子邮件向您发送 HTML 文档，您双击它，您的电子邮件客户端将其保存到本地文件并在浏览器中打开，然后开始从硬盘读取文件，然后将它们发送给电子邮件的发件人）。

您需要通过 HTTP 访问这些文档。

【讨论】：

“本地文件总是被视为不同的来源”并不总是不，这是每个浏览器的规则，随着时间的推移而变化，甚至取决于哪个 API 进行调用......例如在Firefox OP 本来可以访问该文档，因为它位于同一目录中。但是，如果他们确实尝试通过 AJAX 获取它，它也会在那里失败。关于您的示例，这意味着“错误脚本”知道要请求哪个文件名……没什么大不了的。
@Kaiido — Firefox fixed that security hole in version 68，你不需要知道文件名，你只需要猜测它（并且有很多常见软件存储在标准位置的文件可能是猜测）。
您粘贴的链接是关于fetch（即“AJAX”）。在 Firefox 88 iframes 仍然可以访问同一目录中的资源，您仍然可以以同源方式加载图像或视频，从而读取其内容等。
@Kaiido — 我刚刚测试过了。 Firefox 无法使用 JavaScript 读取 iframe 中文件的内容。（并且从未禁止跨源显示图像和视频，只是将数据读入JavaScript）。
你可能做错了。它可以很好地通过 iframe 从同一目录打开一个 html 文件，然后从 Firefox 的主页访问加载的文档。我明确表示“您仍然可以以同源方式加载图像或视频，从而阅读它们的内容”这就是重点：在 Firefox 中，您可以阅读从同一目录中的文件系统加载的媒体数据。例如，您可以通过画布读取图像或视频的像素，您可以通过 Web Audio API 等读取音频的数据。