Zugriff auf einen inneren Rahmen Html?

Ich versuche, eine Funktion aus einem anderen Frame aufzurufen, aber ich kann nicht scheinen, durch das Dom zu reisen, richtig? Mache ich etwas falsch?Zugriff auf einen inneren Rahmen Html?

indes.html Code:

<frameset rows="25%, 75%"> 
    <frame src="top.html"></frame> 
    <frameset cols="50%, 50%"> 
     <frame src="frame_left.html" name="left_frame"> 
     <frame src="frame_right.html" name="right_frame"> 
    </frameset> 
</frameset>

in top.html ich habe:

<body> 
    <h1>Top Frame</h1> 
<button onclick="clicked()">Click me !</button> 
<script type="text/javascript"> 
    function clicked() { 
     console.log("you clicked"); 
     console.log(top.frames["left_frame"].left()); 
    } 
</script> 
</body>

frame_left.html ich habe:

<body> 
    <h3>Frame left</h3> 
    <script type="text/javascript"> 
     function left() { 
      console.log("You called the left function from left frame"); 
     } 
    </script> 
</body>

ich diesen Fehler:

top.html: 12 Uncaught SecurityError: Bl hat einen Frame mit dem Ursprung "null" von einem Frame mit dem Ursprung "null" abhängig gemacht. Protokolle, Domänen und Ports müssen übereinstimmen.

Quelle

2016-04-26 Beto

Wie rufen Sie diese Testseiten in Ihrem Browser auf - über HTTP oder einfach über das Dateiprotokoll? Die Fehlermeldung weist darauf hin, dass es sich um Letzteres handeln könnte. Ich würde empfehlen, dass Sie einen lokalen Webserver für Entwicklung und Tests einrichten (so etwas wie WAMP/MAMP für einen Anfänger.) – CBroe

Nein, es ist einfach nur HTML. Verwenden von Chrome zum Öffnen der Dateien. Ist es nicht möglich, über DOM-Manipulation darauf zuzugreifen? @CBroe – Beto

Wenn Sie sie nur als lokale Dateien öffnen, wenden viele Browser strengere Regeln an, wenn es darum geht, was JavaScript tun kann. Ich bin mir ziemlich sicher, sobald Sie diese Seiten über HTTP aufrufen, sollte das Problem weg sein. – CBroe

Sie können postMessage verwenden, wenn Sie der Besitzer aller Bilder

Fenster 1 sind - Empfang

window.addEventListener("message", receiveMessage, false); 

function receiveMessage(event) 
{ 
    var origin = event.origin || event.originalEvent.origin; 
    // For Chrome, the origin property is in the event.originalEvent object. 
    if (origin !== "http://example.org:8080") 
    return; 

    // ... 
}

Window - 2 Sende

var popup = window.open(...popup details...); 
popup.postMessage(
     "The user is 'bob' and the password is 'secret'", 
     "https://secure.example.net" 
);

Edit 2 Gerade versucht Mit diesem Code arbeitete Snippet für mich:

Eltern Rahmen:

(function() { 
    // ******** Attn : Please specify the domain2 where the iframe is located; *********** 
    var originToConnect = 'http://<childDomain>/'; 


    //a dummy message from child iframe will trigger this receiveChildMessage function 
    //This inturn will act as a callback to send its location again using postMessage 
    var receiveChildMessage = function(e){ 
     console.log('Parent: Request received from child'); 
     document.getElementById('logging').innerHTML += '<span>Parent:</span><br/> Request received from child<hr/>'; 

     var iframe = window.frames['iframe1']; 
     iframe.postMessage(window.top.location.href,originToConnect);//acts like callback and send loc to child 

     console.log('Parent: Sending Location info to child'); 
     document.getElementById('logging').innerHTML += '<span>Parent:</span><br/> Sending Location info to child<hr/>'; 
    }; 
    if (typeof window.addEventListener !== 'undefined') { 
     window.addEventListener('message', receiveChildMessage, false); 
    } else { 
     window.attachEvent('onmessage', receiveChildMessage); 
    } 
})();

Innenrahmen:

(function() { 
    // ******** Attn : Please specify the domain1 where the main file(parent domain I used "server1") is located;*********** 
    var originToConnect = 'http://<parentDomain>/'; 

    console.log('Child: Sending request to parent'); 
    document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Sending request to parent<hr/>'; 

    //Posting a dummy message to trigger onmessage on the parent window 
    //the parent in turn will post a different message where it is programmed to send its location 
    //then will be received in this iframe receiveParentMessage() method 
    parent.window.postMessage('Give Me your co-ordinates',originToConnect); 


    var receiveParentMessage = function(e){ 
     console.log('Child: Message received from parent'); 
     document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Message received from parent<hr/>'; 
     console.log('Child: Print Window location = '+e.data); 
     document.getElementById('msg').innerHTML = '<span>Child:</span><br/> Printing Parent Window location:<br/><br/><b>'+e.data+'</b><hr/>'; 
    }; 
    if (typeof window.addEventListener !== 'undefined') { 
     window.addEventListener('message', receiveParentMessage, false); 
    } else { 
     window.attachEvent('onmessage', receiveParentMessage); 
    } 
})();

Sie haben ein anderes Paar zu schaffen, um miteinander kommunizieren.

Quelle

2016-04-26 21:16:15 joyBlanks

hey danke für die antwort. Dies scheint viel komplizierter als es sein muss. Ich habe das gefunden, aber es scheint auch nicht zu funktionieren, wenn http://www.easywayserver.com/blog/calling-parent-child-function-in-frame/ @joyBlanks – Beto

@Beto überprüfen aktualisierten Beitrag, für den es arbeitete mich – joyBlanks

Zugriff auf einen inneren Rahmen Html?

Antwort

Verwandte Themen