javascript - 如何访问内部框架

Question

如何访问iframe:

var iframe = document.getElementById('sitefield1');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var elem = innerDoc.getElementsByClassName("myclass")[0];

主页是 test1.ru，iframe 是 test2.ru(都在我的电脑上)。在 .htaccess 中是

Header add Access-Control-Allow-Origin "http://test1.ru/2"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
Header add Access-Control-Expose-Headers "X-InlineCount"

是否可以进入 iframe 模块？我是这个网站的所有者(做一些测试)，还可以向我的 firefox 添加任何设置。我还发现这段代码在 IE 中不起作用(即使我打开了不同域之间的访问并且关闭了 XSS 过滤器)。 Chrome 看起来不再支持 --disable-web-security ... Chrome 的错误是已阻止来源为“test1”的框架访问来源为“test2”的框架。协议(protocol)、域和端口必须匹配。

任何想法都将对此非常有帮助。

Answer 1

您不能跨源直接访问框架。在现代浏览器中，您可以使用 postMessage .

发送数据的帧需要调用postMessage

top.postMessage({ foo: "bar" }, "*");

并且接收数据的框架需要注册一个事件监听器来查找消息并对其使用react。

window.addEventListener("message", receiveMessage, false);
function receiveMessage(evt) {
    alert(event.data.foo);
}