2

所以我一直在研究如何在支持 IE7+、Chrome 和 Firefox 的同一域中的浏览器窗口之间进行一些双向通信。我不喜欢使用 cookie 轮询，Ben Alman 似乎有 iframe 的答案，但是当我转换为 时open.window()，我没有运气。

这段代码可以双向工作吗（目前它只能在父母之间工作，而在 IE 中根本不起作用）？还是有其他非 cookie、IE 支持插件/代码示例？欢迎任何建议

index.html（删除逗号和下面的注释行，使其朝一个方向工作）

<html>
  <head>
    <!-- index.html -->
    <title>postmessage Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"                   type="text/javascript"></script>
    <script type="text/javascript" src="ba-postmessage.js"></script>    

    <script type="text/javascript">
    var target = window.open("http://localhost/child.html",'popupWindow','toolbar=no,directories=no,status=no,menubar=no,width=400,height=300,screenX=100,screenY=100,top=100,left=100');   

    function post(message) {
        $.postMessage(message,'http://localhost/child.html',target);
    }

    $(document).ready(function() 
    {
        $.receiveMessage(function(e)  {
            $("#msg").append('<pre> Received: '+e.data+' </pre>');
        },
        'http://localhost/child.html'  // remove this line and it works in 1 direction.
        );
    });
    </script>

  </head>
  <body>
    Parent Window<br/>
    <button class="send-button" onclick="post('parents message');">Post message</button>
    <br/>Response:<br/>
    <div id="msg"></div>

  </body>
</html>

child.html

<html>  
  <head>
    <!-- child.html -->
    <title>postmessage Child</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"                   type="text/javascript"></script>
    <script type="text/javascript" src="ba-postmessage.js"></script>

    <script type="text/javascript">
    var target = window.parent;

    function post(message) {
        $.postMessage(message,'http://localhost',target);
    }

    $(document).ready(function() 
    {
        $.receiveMessage(function(e)  {
            $("#msg").append('<pre> Received: '+e.data+' </pre>');
        },
        'http://localhost'
        );
    });
    </script>

  </head>
  <body>
    Popup Window<br/>
    <button class="send-button" onclick="post('childs message');">Post message</button>
    <br/>Response:<br/>
    <div id="msg"></div>

  </body>
</html>

附加：我刚刚尝试了privateland.com BNC 连接器 - 基于 tcp/cookie 的通信，在 Chrome、Firefox 和 Opera 中运行良好，但在 IE8 中非常慢 - 适合间歇性通信，不适合持续通信。

<html>
  <head>
    <!-- index.html -->
    <title>postmessage Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"       type="text/javascript"></script>
    <script type="text/javascript" src="BNCConnector-compr.js"                          type="text/javascript"></script>

    <script type="text/javascript">
    var target = window.open("http://localhost/child.html",'popupWindow','toolbar=no,directories=no,status=no,menubar=no,width=400,height=300,screenX=100,screenY=100,top=100,left=100');
    var connectorInstance;

    BNCConnectorMonitor.start();

    function post(message) {
        connectorInstance.sendData('CH',message);
    }

    connectorInstance = new BNCConnector("PA");

    connectorInstance.listen = function(who,msg){
        $("#msg").append('<span>RECEIVED: '+who+' says: '+msg+'</span><br/>');
    };
    connectorInstance.onerror = function(type,o){
        $("#msg").append('<span>ERROR: '+o[0]+' to '+o[1]+' caused by '+type+'</span><br/>');
    };
    connectorInstance.onsent = function(o){
        // $("#msg").append('<span>SUCCESS SENDING TO IP: '+o[1]+" says: "+o[0]+'</span><br/>');
    };

    </script>

  </head>
  <body>
    Parent Window<br/>
    <button class="send-button" onclick="post('parents message');">Post message</button>
    <br/>Response:<br/>
    <div id="msg"></div>

  </body>
</html>

<html>  
  <head>
    <!-- child.html -->
    <title>postmessage Child</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"       type="text/javascript"></script>
    <script type="text/javascript" src="BNCConnector-compr.js"                          type="text/javascript"></script>

    <script type="text/javascript">
    var connectorInstance;

    BNCConnectorMonitor.start();

    function post(message) {
        for(var i=0;i<10;i++) {
            connectorInstance.sendData('PA',message);
        }
    }


        connectorInstance = new BNCConnector("CH");

        connectorInstance.listen = function(who,msg){
            $("#msg").append('<span>RECEIVED: '+who+' says: '+msg+'</span><br/>');
        };
        connectorInstance.onerror = function(type,o){
            $("#msg").append('<span>ERROR: '+o[0]+' to '+o[1]+' caused by '+type+'</span><br/>');
        };
        connectorInstance.onsent = function(o){
            // $("#msg").append('<span>SUCCESS SENDING TO IP: '+o[1]+" says: "+o[0]+'</span><br/>');
        };
    </script>

  </head>
  <body>
    Popup Window<br/>
    <button class="send-button" onclick="post('childs message');">Post message</button>
    <br/>Response:<br/>
    <div id="msg"></div>

  </body>
</html>
4

0 回答 0