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

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

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

Answer 2

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

它的安全部分。

Answer 3

应该是这样的

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