Question

在我的网页中，我使用此功能显示一个小弹出窗口

function popup (url) 
{
     poppedUpWindow= window.open(url, "PopupWindow", "width=400,height=300");
     poppedUpWindow.focus();
     return false;
}

我需要在thoos 2 windows之间共享对象。我尝试过这样的事情，但现在确实有效了

poppedUpWindow.document.documentElement.addEventListener("load", foo, false);

我也可能做这样的事情

 function popup (url) 
    {
         poppedUpWindow= window.open(url, "PopupWindow", "width=400,height=300");
         var tmp = poppedUpWindow.document;
         tmp.write('<html><head><title>popup</title>');
         ....
         tmp.close();
         poppedUpWindow.focus();
         return false;
    }

但这种方法将使解决问题变得更加困难。那么我应该如何将信息从父窗口传输到弹出窗口，反之亦然？

Answer 1

来自postMessage的文档：

发送如下信息：

otherWindow.postMessage(message, targetOrigin);

otherWindow可以通过执行以下JavaScript来侦听已分派的消息：

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  if (event.origin !== "http://example.org:8080")
    return;

  // ...
}

请记住浏览器支持：http://caniuse.com/#feat=x-doc-messaging
IE 8 +，Firefox 3 +，Chrome所有版本，Opera 9.5 +，Safari 4 +

Answer 2

以下是我为面临同样问题的其他人解决问题的方法。我正在考虑浏览器是chrome或firefox。我没有测试其他浏览器。事件＆＃34;加载＆＃34; Chrome中有时会在整个javascript文件加载之前被解雇。

function popup (url) 
{
     poppedUpWindow= window.open(url, "PopupWindow", "width=400,height=300");
     poppedUpWindow.focus();


if(is_chrome)
         {
         window.setTimeout("doSomething()",300); //this value could vary! 300ms seemed fine to me!
         }
     else
         {
            fenster.addEventListener('load', doSomething, true); //  FireFox 
         }
 return false;
}

function doSomething()
{
    poppedUpWindow.postMessage("hi","*");
var a = poppedUpWindow.document.getElementById("b");
// do anything you want..

}

在另一个html中应该有这个方法

function receiveMessage(event)
{
  if (event.origin !== stringUrlOfFirstWebPage)
    { 
       return;
    }
    event.source.postMessage("hey!",event.origin);//talking back to the first web page
}

如何使用弹出窗口来回通信

2 个答案: