web-dev-qa-db-ja.com

Angularを使用したiframeとその親の間のwindow.postMessage：実用的な例はありますか？

角度でwindow.postMessage（）呼び出しを送受信する方法の実用的な例を誰かが持っていますか？ githubとngmodulesで ng-post-message モジュールを見つけましたが、そのコードを見るとあまり意味がなく、ドキュメントには実用的な例がありません。

編集：失敗した試みを追加するには

景色

<div simulation-Host element="thing in things"></div>
</div>
<div id="debugConsole">
    <h1>MESSAGE CONSOLE</h1>
    <p id="debugText"></p>
</div>

モデル

$scope.things = 
[
    {
        "location"  :   "Foobar",   
        "resource"  :   $sce.trustAsResourceUrl("http://external.domain:14168/Foo/Bar"), 
        "title"     :   "Launch"    
    }
];

指令への私の試み

var simulationFrameHost = angular.module('proxy.directives', []);
simulationFrameHost.config(function ($sceDelegateProvider){
    //URL Regex provided by Microsoft Patterns & Practices.
    $sceDelegateProvider.resourceUrlWhitelist(['^(ht|f)tp(s?)\:\/\/[0-9a-zA-Z]([-.\w]*[0-9a-zA-Z])*(:(0-9)*)*(\/?)([a-zA-Z0-9\-\.\?\,\'\/\\\+&amp;%\$#_]*)?$','self']);
});

simulationFrameHost.directive('simulationHost', ['$window',function($window) {
    return {
        retrict: 'ACE',
        transclude: 'element',
        replace: true,
        scope: true,
        template: [
            '<ul>',
                '<li>',
                    '<span>',
                        '<a href="#">',
                            '{{thing.location}}',
                        '</a>',
                    '</span>',
                    '<messenger>',
                        '<iframe ng-src="{{thing.resource}}"  />',
                    '</messenger>',
                '</li>',
            '</ul>'
        ].join(''),
        compile: function (tElement, tAttrs, transclude) {
            var interval;            

            var show = function(msg)
            {
                var debugText = document.getElementById("debugText");
                if(debugText){
                    debugText.innerHTML += msg + "<br/>";
                }
            };
            var rpt = document.createAttribute('ng-repeat');
            rpt.value = tAttrs.element;
            console.log(tAttrs.element);
            tElement[0].children[0].attributes.setNamedItem(rpt);

            $(tElement[0].children[0].children[0].children[0]).on("click", function(event){

                console.log(event);
                var iframe = tElement[0].children[0].children[1].children[0].contentWindow;
                show("Initiating connection with: " + event.currentTarget.Host);
                var message = {
                    action: 'syn',
                    param: 'connection'
                };

                interval = setInterval(function(){

                    //*****************************************
                    iframe.postMessage(JSON.stringify(message), 'http://'+ event.currentTarget.Host);
                    //*****************************************

                }, 500);
                return false;               
            });



        }
    }
}]);

私がAngularに適応させようとしている作業中のレガシーコード

このコードはiframeではなくポップアップを使用していることに注意してください。ウィンドウ間のIEのpostMessageが壊れているという複雑な問題に遭遇したため、iframeにフォールバックする必要があります。

マークアップ

<body>
        <div id="debugConsole">
            <h1>MESSAGE CONSOLE</h1>
            <p id="debugText"></p>
        </div>
        <h1>This is a test</h1>

        <ul>
            <li>
                <a href= "http://external.domain:14168/Foo/Bar" target="_blank" ><p>Foobar</p></a>
            </li>
        </ul>
        <script src="js/jquery-1.10.2.min.js"></script> 
        <script src="bower_components/angular/angular.js"></script>
        <script src="bower_components/angular-animate/angular-animate.js"></script>
        <script src="bower_components/angular-route/angular-route.js"></script>
        <script src="bower_components/angular-resource/angular-resource.js"></script>
        <script src="js/SCORM_API_wrapper.js"></script>
        <script src="js/json2.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/index.js"></script>
    </body>

index.js

$('a').on("click",function(event){
    console.log(event);
    var pop = window.open(event.currentTarget.href, 'poop');
    show("Initiating connection with: " + event.currentTarget.Host);
    var message = {
        action: 'syn',
        param: 'connection',
    };

    interval = setInterval(function(){
        pop.postMessage(JSON.stringify(message), 'http://'+ event.currentTarget.Host);
    }, 500);
    return false;

});

$(window).on("message", function(e) {
    clearInterval(interval);

    var eventData = JSON.parse(e.originalEvent.data);
    show("Message received from: " + e.originalEvent.Origin);
    if(eventData.action) {
        switch (eventData.action) {
            case 'syn-ack':
                ack(e.originalEvent, eventData.param, eventData.value);
                break;
            case "set":
                show("Set request received: " + e.originalEvent.data);
                set(eventData.param, eventData.value);
                break;
            case "get":
                show("Get request received: " + e.originalEvent.data);
                var value = get(eventData.param);
                var response = {
                    action: "response",
                    type: "get",
                    param: eventData.param,
                    value: value
                };
                e.originalEvent.source.postMessage(JSON.stringify(response), channel);
                break;
        }
    }
});

ディレクティブのコンパイルで、クリックイベントを生成されたアンカータグに接続しようとしています。クリックしてiframeにメッセージを投稿しようとしていますが、iframe.postMessageは何もしません。それはただ地獄に落ちます、そして私は今朝10時からこれに取り組んでいます。私の目は釉薬をかけ始めています：p

編集：コンテナの種類に関係なく、個別のコンテナ間で一般的なメッセージングディレクティブの拡張要件を追加します（機能するコードがあります）。

1)iframe to parent

2)window to window（<=はい、これがIEでは機能しないことはすでに知っています）

2番目のポストを生成したウィンドウに「syn」メッセージを作成した直後に送信させることで、ウィンドウ間メッセージングを実行するレガシーコードが機能していました。次に、2番目のウィンドウはメッセージを「syn」として受信し、送信者をmessageHandleとして保存して、返信メッセージを投稿するためのチャネルを維持し、「syn-ack」を返しました。発信者は「ack」でフォローアップし、セカンダリウィンドウはackを受け取り、作業を続行しました。 （タイムアウトの前にackが戻らなかった場合は、接続が失敗したことをログに記録し、セカンダリウィンドウが一定の間隔でポーリングして接続の復元を試みました）

angularjspostmessage
10
K. Alan Bates

Angularディレクティブでこれを機能させることができませんでした。これを「正しい方法」で実行しようとして、無駄な一晩中引っ張っていました。要件がなかったので、そのアイデアをもっと早く排出したかったのですが」これは、X-Domainシステム間でメッセージングプロキシを提供するための専用ソフトウェアであるため、拡張する必要はありません。

'use strict'
var app = angular.module('domain.system.controllers', ['services.proxy.mine']);
app.controller('ProxyCtrl', ['$scope', '$routeParams', '$window', '$sce', 'MyService',
                function    ( $scope,   $routeParams,   $window,   $sce,   MyService)
               {
                    $($window).on("message", function(e){
                       var message = JSON.parse(e.originalEvent.data);
                       if(message.recipient){
                            switch(message.recipient){
                                case: "ProxyCtrl":
                                       //handle message;
                                       break;
                            }
                       }
                    }
              }
]);

このコードを機能するディレクティブに変換する方法の詳細な説明に100％興味があります。

4
K. Alan Bates

この投稿に出くわしたばかりですが、これはあなたを助けるかもしれません。

(function() {
    'use strict';

    angular
    .module('postmessage')
    .factory('iFrameMessagingService', iFrameMessagingService);

iFrameMessagingService.$inject = ['$window', '$location', '$rootScope', '$log'];

function iFrameMessagingService($window, $location, $rootScope, $log) {
    var service = {
        sendMessage : sendMessage
    };

    activate();
    return service;

    function activate(){
        activateIncomingMessageHandler();
    }

    function activateIncomingMessageHandler(){
        $window.addEventListener('message', function(event){
            if (typeof(event.data) !== 'undefined'){

               // handle message
            }
        });

    }

    function sendMessage(message){
        // Dispatch the event.
        $log.debug(message);
        if($window.parent !== $window){
            $window.parent.postMessage(message, '*');
        }
    }

}
})();
6
Matt