JavaScript - 从 iframe 访问元素 [重复]

Question

我知道有几个类似的问题，但我在尝试实施他们的解决方案时遇到了一些问题。

我有 2 个html 页面。第一个有一个包含第二页的iframe。我希望第一页能够通过 iframe 从第二页获取 textarea 的值。

问题来了。这两个文件都在我计算机上的同一目录中，但出现此错误：Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

JavaScript：

window.onload = function(){
    var f = document.getElementById("text-box-iframe").contentWindow;
    var innerDoc = f.contentDocument || f.contentWindow.document;
}

HTML：

<iframe id="text-box-iframe" src="text-box.html"></iframe>

所以这是我的两个问题：为什么这段代码无法访问iframe 的页面（第 2 页），我需要做些什么来解决这个问题？

IDK 如果这有帮助，但这是第二页的代码：

<textarea id="text-box"></texarea>

请不要推荐任何插件或库。我希望在 JavaScript/HTML（没有 jQuery）中得到这个答案，并且我不想使用 postMessage 在页面之间进行通信。我几乎 100% 确定这种方法会起作用，我只是需要一些帮助才能让它起作用。

提前致谢。

Answer 1

应该是这样的

window.onload = function() {
  var f = document.getElementById("text-box-iframe");
  var innerDoc = (f.contentWindow || f.contentDocument);
  console.log(innerDoc)
  console.log(innerDoc.document.getElementById('text-box').value)
}

Answer 2

出于安全原因，file:// 帧上的所有操作都被视为跨域。简而言之，在显示本地文件时不能进行跨框架操作——如果需要，请设置 Web 服务器。

（如果您好奇：这是为了防止您打开的恶意 HTML 文件读取您计算机上其他文件的内容。）

Answer 3

内部框架和父框架，都应该来自同一个域。否则浏览器将不允许您访问子框架的元素。

它是安全的一部分。