JavaScript

Question

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

我有 2 html 页。第一个有一个包含第二页的 iframe。我希望第一页能够通过 iframe.

从第二页获取文本区域的值

问题来了。这两个文件都在我计算机上的同一目录中，但出现此错误：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

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

它是安全的一部分。

Answer 2

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

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

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

JavaScript - 从 iframe 访问元素

JavaScript - Accessing elements from an iframe

iframe

cross-domain