Führen Sie JavaScript-Funktion in einer anderen HTML-Datei in einem Skript-Tag

Question

Derzeit habe ich zwei HTML-Dateien. Eine namens index.html und eine andere namens editor.html

Inside index.html Ich habe einen iframe von editor.html Darüber ist iframe auch ein Benachrichtigungssystem, das ich gemacht habe. Um eine Benachrichtigung verwendet es eine Funktion ausführen ich geschaffen, die kann wie so verwendet werden:

Notification("msg"); 

Diese Funktion funktioniert gut, wenn ich es so nennen aus dem Inneren der index.html, da die Funktion der HTML-Code der index.html modifiziert (via .innerHTML). Ein Problem zeigt sich, wenn ich es von der editor.html versuchen und rufen

Auch mit dem editor.html in index.html wie dies an der Spitze der index.html hinzugefügt:

<script src="editor.html"></script> 

Und ich schrieb dies im editor.html:

<script src="index.html"></script> 

Wenn ich versuche, und die Benachrichtigungsfunktion von der editor.html laufe ein Fehler ist, da die Funktion in der index.html ist und modifiziert index.html, nicht Editor .html.

Beachten Sie, dass in jedem der index.html und editor.html das Javascript in einem Tag ist, da es andere HTML in der Datei gibt. Danke und bitte stellen Sie Fragen, wenn Sie eine weitere Bestätigung benötigen.

Answer 1

Dies funktioniert einwandfrei, wenn der iframe und der Container in derselben Domäne sind.

Sie könnten die Definition der Benachrichtigungsfunktion in einer einzigen externen Datei setzen, wie main.js:

function Notification(msg) 
{ 
    var div = document.getElementById("notification-div") ; 
    div.innerHTML = msg ; 
    /* The important thing is make this to be the container window when 
    * Notification is called, so document is the desired one. 
    */ 
} 

In index.html Sie die iframe und div sollte die Meldung Text zu drucken:

<div id="notification-div"></div> 
<iframe src="editor.html" width=300 height=200></iframe> 

Dann sind main.js in index.html:

<script type="text/javascript" src="main.js"></script> 

In index.html Sie es direkt anrufen können, solange dieses Fenster:

Notification("From index.html") ; 
/* window will be this in the Notification function, so the call to 
* document.getElementById, will actually be window.document.getElementById 
*/ 

In editor.html Sie zum Container Fensterobjekt wie oben verweisen. So wird dieser Aufruf das gewünschte Ergebnis geben: