2

そこで、IE7+、Chrome、および Firefox をサポートする同じドメイン内のブラウザー ウィンドウ間で双方向通信を行う方法を検討してきました。Cookie ポーリングの使用に満足していません。Ben Alman は iframes の答えを持っているようでしたが、に変換すると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>

追加: theprivateland.com BNC Connector - 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