Wie zum ausführen einer Funktion durch postMessage

Ich habe diesen code in einem iframe:

window.addEventListener('message', function(e){

  if(e.data == 'test')
    console.log(e);

}, false);

und diese innerhalb des übergeordneten Dokuments:

$('#the_iframe').get(0).contentWindow.postMessage('test', 'http://localhost/');

Also das übergeordnete Dokument sendet eine "test" - Nachricht an den iframe und es funktioniert.

Aber wie kann ich eine Funktion definieren, die im übergeordneten Dokument, und irgendwie senden diese Funktion durch postMessage an den iframe, der ausgeführt wird, die Funktion lokal?

Die Funktion hat einige änderungen an dem Dokument wie diesem:

var func = function(){
  $("#some_div").addClass('sss');
}

(#some_div vorhanden ist, in den iframe, nicht das übergeordnete Dokument)

Ich denke, es ist ein window.parent variable, die sollte sein zugänglich von der iframe. Das Hauptfenster wird auch eine parent aber ich glaube, es ' ll finden Sie sich selbst

InformationsquelleAutor Alex | 2012-06-12

13

Gibt es nichts, das verhindern würde, dass Sie von der Weitergabe eines stringified Funktion postmessage-Ereignis-Daten. Die Umsetzung ist trivial, für jede Funktion-Deklaration, wie
```
function doSomething(){
    alert("hello world!");
}
```
Könnte man encodeURI Ihren string interpretation:
```
console.log(encodeURI(doSomething.toString()));
//function%20doSomething()%20%7B%0A%20%20%20%20alert(%22hello%20world!%22);%0A%7D
```
Kann es dann ausgeführt werden, die als Teil einer Verschluss - etwas, das nicht übermäßig einfallsreich wie
```
eval('('+decodeURI(strCallback)+')();');
```
Gibt es eine fiddle würd proof-of-concept ohne der cross-frame-Architektur - ich werde sehen, ob ich können zusammen eine postMessage-version, aber es wäre nicht ganz einfach, Gastgeber w/jsfiddle

Update

Wie versprochen, eine volle Nachbildung, die funktioniert (links unten). Mit der richtigen event.origin überprüft, dies wäre ausreichend inpenetrable, aber ich weiß für die Tatsache, dass unser security-team ließ nie eval in Produktion wie diese 🙂

Angesichts der Möglichkeit, würde ich vorschlagen, die Funktionalität normalisiert werden über zwei Seiten, so dass nur eine parametrische Nachricht übergeben werden müssen (D. H. Argumente, die nicht-Funktionen), aber es gibt definitiv ein paar Szenarien, in denen dies ein bevorzugter Ansatz.

Übergeordneten code:
```
document.domain = "fiddle.jshell.net";//sync the domains
window.addEventListener("message", receiveMessage, false);//set up the listener

function receiveMessage(e) {
    try {
        //attempt to deserialize function and execute as closure
        eval('(' + decodeURI(e.data) + ')();');
    } catch(e) {}
}
```
Iframe-code:
```
document.domain = "fiddle.jshell.net";//sync the domains
window.addEventListener("message", receiveMessage, false);//set up the listener

function receiveMessage(e) {
    //"reply" with a serialized function
    e.source.postMessage(serializeFunction(doSomething), "http://fiddle.jshell.net");
}

function serializeFunction(f) {
    return encodeURI(f.toString());
}

function doSomething() {
    alert("hello world!");
}
```
Prototyp-mockup: parent code und iframe-code.

funktioniert das eigentlich? Ich meine, können Sie den code von jeder Funktion durch den Aufruf der Funktion.toString() ?
tut es, danke 😀
ja, es tut für alle - Funktion, die Sie definiert haben - oder, eher, eine Funktion nicht in nativem code geschrieben (d.h. Sie können nicht sehen, die string-Darstellung der Quell-code für window.alert)
nur daran, dass Sie am Ende mit dem worst-practice code (evals, Funktionen ausgeführt, im globalen Kontext,...).

InformationsquelleAutor o.v.
10

Können Sie nicht wirklich. Obwohl die (Entwurf) - Spezifikation für postMessage spricht über strukturierten Objekten, z.B. geschachtelte Objekte und arrays, [...] JavaScript-Werte (strings, zahlen, Datumsangaben, etc) und [...] bestimmte Daten von Objekten wie Datei Blob, FileList und Objekte ArrayBuffer die meisten Browser erlauben nur Zeichenfolgen (einschließlich JSON, natürlich). Lesen Sie mehr unter MDN oder dev.opera. Aber ich bin mir ziemlich sicher, dass es nicht möglich sein, senden Funktion Objekte, zumindest nicht als closures konservieren Ihren Umfang.

So werden Sie am Ende in stringifying die Funktion und die eval() es im iframe, wenn Sie wirklich wollen, zum ausführen von code aus der übergeordneten Fensters. Allerdings kann ich keinen Grund sehen, die für jede Anwendung zu ermöglichen Evaluierung von beliebigem code (auch wenn diese registrierte domains); es wäre besser, bauen Sie eine Nachricht API, die empfangen werden können (JSON-)string-Befehle und ruft seine eigenen Methoden.

InformationsquelleAutor Bergi

In diesem Fall würde ich versuchen, anderen Ansatz. Warum? Bergi schon erklärt, warum es nicht so funktionieren, wie Sie es wollen.

Definieren Sie (und definieren Sie Ihre Funktionen) in der übergeordneten Seite:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">                                        
    var fun = function() { alert('I am a function!'); };

    $(function() {
        //use this function to change div background color
        fun = function() { 
            //get desired div
            var theDiv = $('#frame').contents().find('#some_div');
            theDiv.css('background', '#ff0000');
        };

        //or override it, if you want to change div font color
        fun = function() { 
            var theDiv = $('#frame').contents().find('#some_div');
            theDiv.css('color', '#ff0000');
        };

        //in this example second (font color changing) function will be executed
    });
</script>                                                               
</head>                                                                 
<body>                                                                  
    <iframe id="frame" src="frame.htm"></iframe>
</body>                                                                 
</html>

und nennen Sie Ihre Funktion aus innerhalb von frame-Seiten:

<html>                                                                  
<head>                                                                  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">                                         
    $(function() {
        parent.fun();
    });
</script>                                                               
</head>                                                                 
<body>                                                                  
    <div id="some_div">I am a div (but inside frame)!</div>
</body>                                                                 
</html>

Es mag unbequem sein, aber es funktioniert.

InformationsquelleAutor Zbigniew

1

Erweiterung der folgende Frage können Sie stringify eine Funktion, verwenden postMessage zu senden, die Funktion Körper über, und verwenden Sie dann eval ausführen.

Im wesentlichen, was Sie tun, ist eine Rangierung der Funktion, so dass es kann an den iframe und dann unmarshalling es am anderen Ende. Verwenden Sie hierzu den folgenden code:

Iframe:
```
window.addEventListener("message", function (event) {
    var data = JSON.parse(event.data);
    var callback = window[data.callback];
    var value = data.value;

    if (data.type === "function")
        value = eval(value);

    var callback = window[data.callback];

    if (typeof callback === "function")
        callback(value);
}, false);

function callFunction(funct) {
    funct();
}
```
Eltern:
```
var iframe = $("#the_iframe").get(0).contentWindow;

postMessage(function () {
    $("#some_div").addClass("sss");
}, "callFunction");

function postMessage(value, callback) {
    var type = typeof value;

    if (type === "function")
        value = String(value);

    iframe.postMessage({
        type: type,
        value: value,
        callback: callback
    }, "http://localhost");
}
```
Sobald Sie die Funktion in Ihrem Körper, iframe und eval es Sie können es verwenden, wie eine normale Funktion. Können Sie es einer Variablen zuweisen, übergeben Sie es herum, verwenden call oder apply auf, bind es, und so weiter.

Beachten Sie jedoch, dass der Umfang der Funktion ist die dynamische (D. H. alle nicht-lokale Variablen in der Funktion muss bereits definiert in Ihrem iframe-Fenster).

In Ihrem Fall das jquery - $ variable, die Sie verwenden, in Ihrer Funktion ist nicht-lokal. Damit der iframe muss jquery schon geladen. Es wird nicht die Verwendung der jquery - $ variable aus der übergeordneten Fensters.

Es ist 2015, die sollte man nicht empfehlen die Verwendung von eval in der Produktion.
Das ist eine dumme argument. Es ist wie wenn man sagt, "Es ist 2015, Sie sollten nicht Menschen zu ermutigen, binden Sie Ihre Schnürsenkel."

InformationsquelleAutor Aadit M Shah
0

Können Sie immer senden postMessage zurück auf den iframe und iframe lassen Griff die Nachricht. Natürlich muss man rechnen, dass es nicht ausgeführt werden, bevor der nächste Befehl im iframe.

InformationsquelleAutor Aiphee

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.

Update