在子窗口javascript中调用父窗口函数答案

【问题标题】：call parent window function in child window javascript在子窗口javascript中调用父窗口函数
【发布时间】：2013-02-23 12:50:17
【问题描述】：

您好，我想在子窗口中从父窗口运行函数

但是下面的代码不起作用

index.php

//set status message
function setStatus($html){
    $("#data").html($html);
    }

//twitter login page handler
function twitter(){
    win = window.open('twit.php','win',"width=882,height=750,toolbar=0");
    setStatus('proccess...');
    }

//close window
 function closeWin(){
    win.close();
    }

//open new window
$(".twitterBtn").click(twitter);

twit.php

<script language="javascript" type="text/javascript">
window.opener.setStatus('Login with Twitter!');
window.opener.closeWin();
</script>

window.opener 的问题，它不起作用

请提出一种适用于所有浏览器且不与其他代码冲突的方法

谢谢

【问题讨论】：

developer.mozilla.org/de/docs/DOM/window.postMessage

标签： javascript jquery function window

【解决方案1】：

好的，花了一些时间，但我有一个工作示例。

我使用 postMessage 进行信息交换，但是，它仅用于让孩子知道其父母.. 但我将示例扩展为亲子聊天。玩得开心：

<html>
<head>
    <script>
        window.addEventListener("load",init,false);
        window.addEventListener("message",message,false); //register postMessages

        //we need this because master(original) and slave(=window.open) must do different actions
        var isSlave=window.location.href.indexOf("slave=true")>0

        //the other-window (in the slave, this is undefined, until the handshake is complete
        var popupwindow;
        if (!isSlave){
            popupwindow=window.open(window.location.href+"?slave=true", "_blank",'toolbar=0,location=0,menubar=0'); 
        }

        // this is called from the child window, after handshake
        function test(){
            var listElem = document.createElement('li');
            listElem.innerHTML="handshake succesful!!!!!";
            document.querySelector("ul").appendChild(listElem);
        }

        function init(){
            document.querySelector("button").addEventListener("click",function(){
                        ////popupwindow.test(); //note this works only if same origin policy allows this, else use postMessages

                //here we send the message to the other window
                popupwindow.postMessage(document.querySelector("#inp").value,"*");
            },false);


            //the timetrigger is needed, because opening and initializing the new window takes time, then we perform a handshake to let the new window know his origin
            setTimeout(function(){
            if(!isSlave)
                popupwindow.postMessage("handshake successful","*");//handsake needed for bidirectional conneciton  
            },200);


        }


        //called when receiving a message
        function message(data){

            //needed for bidirectional message
            if (!popupwindow){
                popupwindow=data.source;
                //popupwindow.postMessage("handshake successful","*"); //send the handshake back to the origin (notification purpose only) //instead, we do test()
                popupwindow.test();
            }

            //display the message
            var listElem = document.createElement('li');
            listElem.innerHTML=data.data;
            document.querySelector("ul").appendChild(listElem);


        }
    </script>
</head>

<body>
    <button>say hello</button>
    <input type="text" id="inp" />
    <ul></ul>
</body>
</html>

【讨论】：

@clph3r 请解释一下这个方法如何将信息从子窗口呈现到父窗口移动你如何处理不同的页面？
当您想登录并使用 twitter 帐户发送评论时喜欢讨论服务
@alismith 这段代码实现了父子窗口之间的聊天。试试看吧..因此您可以在这两个窗口之间发送任何信息。
您可以从子级向父级发送 postMessage。 postMessage 可以包含任何数据，例如 json 对象。在我的示例中，您只需在 inputfiled 中键入一些文本并单击按钮，然后它将此消息发送给父级。它实际上可以寻址多个页面。只需重新加载页面，然后您将看到两个子窗口..每个子窗口都可以将数据发送回客户端（您尝试过吗，您明白吗？）
@clph3r 这太棒了，但是如果子窗口被刷新，我们该如何处理（我有一个场景需要我导航到不同的 URL）。我观察到的是它丢失了弹出窗口