Erlauben eines übergeordneten Fensters, um eine Funktion auf seinem Kind Iframe einer anderen Domäne aufzurufen

Question

Ich habe einen iframe, in dem src andere Domäne ist, und ich versuche, eine Methode in iframe aus dem übergeordneten Fenster aufzurufen. Dann wird es geben unter:

Uncaught SecurityError: Blocked a frame with origin " http://localhost:8080 " from accessing a frame with origin " http://stage.xyz.com ". Protocols, domains, and ports must match.

On Hauptfenster habe ich dies:

launchUPwidget(widgetParams); 
function launchUPwidget(widgetParams){ 
    document.getElementById('iframe').contentWindow.invokeUPWidget(widgetParams);  
} 

Auf iframe:

window.invokeUPWidget = invokeWidget; 

Wie kann ich eine Funktion in Kind iframe Form übergeordnete Fenster aufrufen wo ist iframe src eine andere Domain?

Hier Protokolle sind gleich, aber die Domänen sind unterschiedlich.

Answer 1

Sie können nicht auf ein mit Javascript zugreifen, es wäre ein riesiger Sicherheitsfehler, wenn Sie es tun könnten.
Für die same-origin policy blockiert jeder Browser jedes Skript, das versucht, auf einen Rahmen mit einem anderen Ursprung zuzugreifen.

Auch wenn Richtlinien mit demselben Ursprung den Zugriff von Skripten auf Inhalte von Websites anderer Herkunft blockieren, können Sie dieses Problem umgehen, indem Sie window.postMessage und das zugehörige Nachrichtenereignis verwenden, um Nachrichten zwischen den beiden Seiten zu senden , wie folgt aus:

in Ihrer Haupt-Seite:

var frame = document.getElementById('your-frame-id'); 

frame.contentWindow.postMessage(/*any variable or object here*/, '*'); 

in Ihrem (in der Haupt Seite enthalten):

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

    // IMPORTANT: Check the origin of the data! 
    if (event.origin.indexOf('http://yoursite.com')) { 
     // The data has been sent from your site 

     // The data sent with postMessage is stored in event.data 
     console.log(event.data); 
    } else { 
     // The data hasn't been sent from your site! 
     // Be careful! Do not use it. 
     return; 
    } 
}); 

Es gibt eine similar question. Sie können mehr darüber lesen.