Question

我正在尝试使用以下代码创建iframe并通过方法发布消息。

function sendMessage(){
    var text = document.getElementById("message").value;
    iframe.contentWindow.postMessage(text,"http://localhost");
}

我在iframe上添加了消息事件，以便我可以捕获相应的事件。

iframe.addEventListener("load",function(){iframeLoaded()},false)
iframe.contentWindow.window.
    addEventListener("message", function(event){handleMessage(e);},false);

function iframeLoaded(){
    alert("Iframe loaded");
}
function handleMessage(event){
    alert(event.data+" Message received");
}

处理消息未被调用。 http://jsfiddle.net/k2wuk6t3/

Answer 1

我们使用postMessage的原因是因为它不需要访问加载到框架中的文档。这是因为我们无法直接访问该文档（出于安全原因）。

您正在尝试通过直接访问加载到框架中的文档来添加事件侦听器，因此出于同样的安全原因您将被阻止。

您加载到框架中的文档必须负责为您的邮件设置自己的侦听器。

您的现场演示（SO has supported live demos for over a year，没有必要诉诸第三方）还有一个问题。您正在创建iframe，将message事件侦听器绑定到默认加载到它的文档，然后设置src以便丢弃文档（使用事件侦听器）和新文档装了。

这就是为什么你在那里看不到安全例外的原因。

Answer 2

我有同样的问题。我通过在附加任何侦听器之前“等待” iframe加载来修复它。

Postmessage无法使用动态iframe

2 个答案: