2016-07-29 16 views
5

Ich öffne eine neue leere Registerkarte. Jetzt von diesem Tab muss ich eine Website in einem neuen Tab öffnen. Ich mache das wie folgt. In seiner Konsole schreibe ich:Warum funktioniert das Onload-Ereignis nicht auf einer mit window.open geöffneten Registerkarte?

var wild = window.open("https://css-tricks.com/", "mywin", ''); 

Das funktioniert gut. Jetzt habe ich Zugriff auf dieses neue Fenster mit wild.document. Jetzt möchte ich etwas Code auf dieser Seite ausführen, nachdem ihr dom geladen wurde. Ich benutze das onload Ereignis als:

function foo(){ 
    var mytext = wild.document.body.textContent; 
    alert(mytext); 
} 
wild.addEventListener("load", foo); 

Aber leider ist der Alarm nicht geschieht. Ich habe auch versucht, den Ereignis-Listener in anonyme Selbstaufruf-Funktion wie explained in this answer setzen, aber das hat auch nicht funktioniert. Ich habe auch ondload-Event versucht, aber das hat leider auch nicht funktioniert. So,

Warum funktioniert das Ereignis onload nicht auf einer Registerkarte, die mit window.open geöffnet wird? Und wie funktioniert es richtig?

+2

Wahrscheinlich aufgrund der [Same Origin Policy] (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy). Wenn Sie eine externe Site laden, können Sie keine Ereignisse darauf ausführen. – Utkanos

+0

@Utkanos Wenn ich anstelle von 'onload' die' setTimeout' Funktion mit 5sec Verzögerung verwende, dann funktioniert das perfekt. Ich denke, es liegt nicht an der gleichen Herkunftspolitik. – user31782

+0

hast du versucht wild.onload = foo; oder wild.addEventListener ("load", foo, true); ? –

Antwort

0

Bitte versuchen Sie dies,

function foo() { 
    var wild = window.open("http://google.com/", "mywin", ''); 
    wild.addEventListener("load", function(){ 
     var mytext = wild.document.body.textContent; 
     alert(mytext);   
    }); 
} 
+0

Ich habe das versucht, aber das Onload-Ereignis wird nie ausgeführt. – user31782

1

Sie eine externe Seite geladen, so dass Sie einen Cross-Origin-Rahmenfehler bekommen sollen (ich tat, als ich Ihren Code in der Chrome-Konsole getestet). Wenn ich es in Firefox teste, ist das Fensterobjekt null. In Safari ist das Objekt nicht definiert.

Auch mit setTimeout sind die Objekte null oder der Fehler wird ausgelöst, also wenn Sie sagen, es funktioniert mit setTimeout würde ich diesen Code teilen. Sie dürfen nicht auf das Dokument eines anderen Fensters zugreifen, es sei denn, der Ursprung ist identisch (also die gleiche Seite). Zumindest ist das mein Verständnis.

ich ein Skript auf der ersten Seite haben würde, der das andere Fenster öffnet sich:

<body> 
<script type="text/javascript"> 
    window.open('http://www.linktoyourotherpage.com/', 'mywin', ''); 
</script> 
</body> 

Und ein Skript für die andere Seite, die das Dokument die folgenden

<body onload="foo()"> 
    <script type="text/javascript"> 
    function foo() { 
     var mytext = document.body.textContent; 
     alert(mytext); 
    } 
    </script> 
</body> 
+0

Ich bekomme keinen Kreuzursprungsfehler, weil ich immer eine leere neue Registerkarte öffne, die keinen Host hat. Wie Sie vorschlagen, 'onload' Ereignis auf dem' Körper' der anderen Seite anzuhängen. Wie kann ich dieses Event am Körper anhängen, bevor das 'dom' tatsächlich geladen wurde? – user31782

+0

Tun Sie es genau wie oben erklärt – kag359six

+0

Wie füge ich das Skript-Tag für die andere Seite hinzu? – user31782

3

Wie in Detecting the onload event of a window opened with window.open manipuliert demo funktioniert gut:

var wild; 

window.addEventListener('DOMContentLoaded', function(e) { 
    wild = window.open("myLocalStaticPage.html", "mywin", ''); 
    wild[wild.addEventListener ? 'addEventListener' : 'attachEvent'](
    (wild.attachEvent ? 'on' : '') + 'load', function (e) { 
     alert("loaded") 
    }, false); 
}); 

// the following handler only used for test purposes 
document.addEventListener('click', function(e) { 
    try { 
    alert(wild); 
    } catch(err) { 
    alert(err); 
    } 
}, false); 

Ich habe auf der Quellseite einen Listener hinzugefügt, so dass Sie den Wert der Wildvariablen einfach durch Klicken auf die Seite testen können.

Für eine statische Seite gibt es kein Problem.

Aber, wenn Sie die klassische „http://google.com/“ Seite öffnen Sie, klicken Sie auf der Startseite die folgenden Fehler sehen:

enter image description here

und von der Debugging-Umgebung:

enter image description here

Was bedeuten sie? Wenn Sie die Google-Seite öffnen, wird Google von sich aus weitergeleitet, und das liegt außerhalb Ihrer Kontrolle.

Warum passiert das? Um Kratzen zu vermeiden .....nur zum Beispiel und mehr.

Kann ein solcher Listener (load) hinzugefügt werden? Ja, aber das einzige, was ich weiß, ist eine Chrome-Erweiterung oder FF-Erweiterung oder IE zu erstellen, da die Erweiterung api (Javascript) Ihnen die Möglichkeit bietet, dies ohne Schmerzen zu tun.

Wenn Sie Interesse an Chrome api sind Sie einen Blick auf manifest nehmen und mehr im einzelnen auf einen Abschnitt "content_scripts" wie genannt:

"content_scripts": [{ 
"matches": ["*://*/*"], 
"js":   ["content.js"], 
"run_at": "document_end", 
"all_frames": true 

}],

, wo die "run_at" Parameter:

Steuert, wenn die Dateien in js injiziert werden. Kann "document_start", "document_end" oder "document_idle" sein. Der Standardwert ist "document_idle".

+0

Ich habe Ihren Code in der Konsole hinzugefügt. Es öffnet sich eine neue Seite, aber es wird keine Warnung beim 'Laden' Ereignis angezeigt. – user31782

+0

@ user31782 Welche URL hast du benutzt? Wenn es "http://google.com/" ist, ist dies genau der Inhalt meiner Antwort. – gaetanoM

+0

@ user31782 Ich habe die folgende Geige erstellt, Sie können es versuchen: https://jsfiddle.net/5ueurpzg/, um die Blockfehlermeldung zu sehen. – gaetanoM

0

Das Ereignis window.onload wird ausgelöst, wenn jedes Dokument geladen wird.

var wild=null; 

     function load() { 
      if(wild !=null) 
      { 
       alert("load event detected! :"+wild.location.hostname+wild.location.pathname); 
      } 
      else 
       alert("not yet loaded"); 
      } 
     window.onload = load; 

     wild = window.open("https://www.google.co.in/", "mywin", ''); // Security Exception raise due to Cross orgin security enabled google.co.in 
    // wild = window.open("https://localhost:5555/test.html", "mywin", ''); //This will work when same origin policy 
    console.log("After Loading ..."); 
+0

Es funktioniert auch nicht. Es wird keine Warnmeldung angezeigt. – user31782

+0

URL sollte der gleiche Ursprung oder URL-Server sollte Kreuzursprung ermöglichen. // Sicherheit Ausnahmeerhöhung wegen Cross-Origin-Sicherheit für https://google.co.in aktiviert – tsb

+0

Ich bekomme keine Kreuzursprungsfehler, weil ich den Code in der Konsole der neuen leeren Registerkarte verwenden. – user31782