Fenster.postMessage zwischen iframe und seine Eltern mit Eckigen: hat jemand ein funktionierendes Beispiel?

Hat jemand ein funktionierendes Beispiel, wie man senden und empfangen-Fenster.postMessage () - Aufrufe in eckige? Ich fand die ng-post-Nachricht Modul auf github und ngmodules, aber ich sehe, dass code und es nicht machen eine ganze Menge Sinn für mich und die Dokumentation fehlt, ein funktionierendes Beispiel.

Edit: um meinen gescheiterten Versuch

Ansicht

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

Modell

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

Mein Versuch einer Richtlinie

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;               
            });



        }
    }
}]);

Arbeiten legacy-code, den ich bin versucht, anzupassen, zu Eckig

Beachten Sie, dass dieser code verwendet ein popup anstatt in einem iframe; lief in der Komplikation, dass der IE ist postMessage zwischen windows ist kaputt, so fallen Sie zurück zu iframe.

Markup

<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;
        }
    }
});

In meinem Richtlinie kompilieren, ich bin versucht zu verkabeln, bis ein click-Ereignis, das generiert Anker-tag. Ich versuche, den klicken Sie auf, um eine Nachricht an den iframe, sondern iframe.postMessage ist nichts zu tun. Es geht einfach ab in den nether, und ich habe schon seit 10 heute morgen. Meine Augen beginnen zu glänzen : p

Bearbeiten: Hinzufügen einer Erweiterung Bedarf (das habe ich nun schon funktionierenden code) für eine Allgemeine messaging-Richtlinie zwischen getrennten Behältern, unabhängig von der Gebindeart:

1)iframe to parent

2)window to window (<=ja, ich weiß schon, das funktioniert nicht in IE)

Hatte ich legacy code arbeiten durchgeführt hat, Fenster zu-Fenster messaging-haben die Fenster gespawnt
der zweite post ein "syn" - Nachricht, um es sofort nach der Erstellung. Das zweite Fenster erhielt dann die Nachricht als "syn" und gespeichert, die der Absender als messageHandle, so dass es könnte, halten Sie einen Kanal zur post zurück Nachrichten dann wieder ein "syn-ack." Der Urheber folgte mit einem "ack", und das sekundäre Fenster erhalten Sie eine Bestätigung und fuhr Fort mit seiner Arbeit. (Wenn das ack nicht zurück vor dem timeout, habe ich protokolliert, dass die Verbindung fehlgeschlagen waren, und dann die sekundären Fenster abgefragt auf ein Intervall, um zu versuchen, die Verbindung wiederherzustellen)

Konnte Sie nach einer Probe von dem code, den Sie versucht, oder vielleicht das äquivalent plain, js-code, den Sie versuchen zu emulieren, in Winkel?
Es würde schwierig sein, umgestalten, meinen aktuellen code zu isolieren, nur die versuche zu postMessage. Ich kann es aber versuchen.
Ich betrogen. $(window).on("message",function(){}); in der Steuerung. Ich verbrachte viel zu viel Zeit täuschen versucht, dass die Arbeit der "Kantige Art und Weise." Dauerte etwa 10 Minuten, um es zu bekommen arbeiten die "Praktische Art und Weise." Ich werde umgestalten, wenn ich Zeit habe.
Die praktische Arbeit. Gehen Sie vor und stellen das als Ihre Antwort.

InformationsquelleAutor K. Alan Bates | 2014-07-28

angularjs postmessage

4

Konnte ich nicht bekommen, diese arbeiten mit einem Winkel-Richtlinie. Ich zog eine vergebliche all nighter versuchen, dieses zu erhalten getan "Richtigen Weg" und wünschte, ich hätte ausgeworfen, die Idee früher, weil meine Anforderungen nicht wirklich rechtfertigen. Dieses Ding nicht zu skalieren, weil es Zweck Entwicklung von software für die Bereitstellung einer messaging-proxy zwischen X-Domain-Systemen.
```
'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;
                            }
                       }
                    }
              }
]);
```
Ich bin 100% daran interessiert, eine detaillierte Erklärung, wie zu wandeln Sie diesen code in eine funktionierende Richtlinie.

+1! Ich habe gerade verbrachte etwa 3 Stunden mich versucht den Winkel-Richtlinie, bevor Sie widerwillig zurück fallen zu jQuery. Ebenso wäre daran interessiert, wenn jemand uns sagen könnte, was uns fehlt.
Ich schrieb diese Frage schon eine ganze Weile zurück. Ich hatte noch nicht die Notwendigkeit, zu überdenken, aber ich habe ganz ein bisschen besser mit den Richtlinien. Das nächste mal arbeite ich in einer meiner Winkel-Kunden, ich werde versuchen zu finden, ein paar Minuten, um zu sehen, wenn ich kann werfen etwas zusammen, die Ihnen helfen könnten.
Könnte Sie vielleicht ersetzen $($window) mit angular.element($window)?
Vergessen Sie nicht, entfernen Sie die Zuhörer in $scope.$on("$destroy", ...)

InformationsquelleAutor K. Alan Bates

Kam gerade über diesem post, dieses kann dir helfen.

(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, '*');
        }
    }

}
})();

InformationsquelleAutor Matt

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Edit: um meinen gescheiterten Versuch

Arbeiten legacy-code, den ich bin versucht, anzupassen, zu Eckig

Bearbeiten: Hinzufügen einer Erweiterung Bedarf (das habe ich nun schon funktionierenden code) für eine Allgemeine messaging-Richtlinie zwischen getrennten Behältern, unabhängig von der Gebindeart:

Ich bin 100% daran interessiert, eine detaillierte Erklärung, wie zu wandeln Sie diesen code in eine funktionierende Richtlinie.