为什么我的 Chrome 扩展程序无法使用 HTML5 postMessage 与我注入的框架进行通信？

发布于 2024-09-30 12:26:29 字数 874 浏览 7 评论 0原文

因此，我在 DomainA 上有一个页面，并且使用 Chrome 扩展程序注入一些 javascript，插入指向 DomainB 的 iframe。

$("body").append("<iframe id='someFrame' src='http://www.domainB.com' width='300' height='800'></iframe>");

我还在 DomainA 中注入了一些 javascript，尝试获取 iframe 的 contentWindow。我想在上面使用 HTML5 postMessage api。

$("body").append("<a class='myLink'>Post Message</a>");
$(".myLink").click(function(){
    var frameElem = document.getElementById("someFrame"); 
    console.log("frameElem: " + frameElem); //succeeds

var contentWin = frameElem.contentWindow;
console.log("contentWin : " + contentWin); //undefined

//can't do this since contentWin is undefined: 
//contentWin.postMessage("data", "*");
});

但是，contentWindow 属性未定义。为什么会这样，我该如何解决它？如果我将此扩展代码放入网页中，它本身就可以正常工作。

谢谢！

（请原谅蹩脚的jquery/javascript）

原文

So, I have a page on DomainA, and, using a Chrome extension, I'm injecting some javascript that inserts iframe that points to DomainB.

$("body").append("<iframe id='someFrame' src='http://www.domainB.com' width='300' height='800'></iframe>");

I also inject a some javascript into DomainA that attempts to get the iframe's contentWindow. I want to use the HTML5 postMessage api on it.

$("body").append("<a class='myLink'>Post Message</a>");
$(".myLink").click(function(){
    var frameElem = document.getElementById("someFrame"); 
    console.log("frameElem: " + frameElem); //succeeds

var contentWin = frameElem.contentWindow;
console.log("contentWin : " + contentWin); //undefined

//can't do this since contentWin is undefined: 
//contentWin.postMessage("data", "*");
});

However, the contentWindow property is undefined. Why is that, and how can I get around it? If I put this extension code in a webpage it'll work fine by itself.

Thanks!

(pardon the crappy jquery/javascript)

分享到QQ

分享到微博