onclick im parent frame - Seite 2

moontan · #11 (**permalink**) 12.05.2014, 20:24

Zitat:

ich schreibe aus einem iFrame eine Function und ein Element

Schreibe war da wohl das falsche Wort - ich hänge das schon in den DOM.

Vielleicht mache ich ja wirklich etwas anders - aber den sehe ich den Wald vor Bäumen nicht.

EDIT: Sorry hatte einen Link eingestellt - den musste ich leider wieder rausnehmen - da ich den Server nicht rausgeben darf. (Ist leider nicht meiner ...)

Der einzige Teil den ich hier nicht gepostet hatte ist die aufrufende Datei. Die sieht so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div id="wrapper">
<div id="mydiv">
<iframe src="test1.html" scrolling="auto"></iframe>
</div>
</div>
</body>
</html>

Wobei test1 die Datei mit dem vorher geposteten Code ist.

Im IE funktioniert es - aber im Firefox bekomme ich:
ReferenceError: testfunc is not defined

Im Chrome das gleiche....

LG
Uli

MitjaStachowiak · #12 (**permalink**) 13.05.2014, 10:44

Also so, wie ich das verstanden habe, schreibst du das im IFrame definierte Element mytest in die Parent-Seite. Per InnerHTML, appendChild, oder wie auch immer.

Du musst bei dieser Sache aber bedenken: Der interpretierbare Script-Code und der Script-Code, den du in <SCRIPT>-Elementen definierst ist nicht unbedingt der gleiche. Das was im <SCRIPT> steht wird einmal beim Laden der Seite in den JavaScript-Interpreter übernommen. Wenn du später die <SCRIPT>-Elemente änderst, hat das nicht immer in jedem Browser auch zur Folge, dass der interpretierbare Code auch geändert wird.

Um eine JavaScript-Funktion in der Parent-Seite zu erzeugen, musst du, wie schon erwähnt, etwas, wie parent.testfunc = function () { alert('Hallo'); } in deinem IFrame aufrufen. Dann wird die testfunc wirklich in das globale Window-Objekt der Parent-Seite eingehängt.

protonenbeschleuniger · #13 (**permalink**) 13.05.2014, 10:46

Du hängst das DIV aus dem iframe um in das parent Dokument, das umhängen heißt aber nicht, dass das Script dabei ausgeführt wird. D.h. testfunc() existiert weiterhin nur in dem iframe.

MitjaStachowiak · #14 (**permalink**) 13.05.2014, 10:59

Genau. Das ist auch noch so ein Punkt: Wenn du mit DOM, also appendChild, arbeitest, musst du das DIV aus der Frame-Seite vorher mit removeChild entfernen, sonst kann es zu Fehlern kommen.

Ich habe hier mal ein Beispiel:
parent.html :

Code:

<HTML>
 <HEAD>
 </HEAD>
 <BODY>
  <A href="javascript:testfunc()">testfunc aufrufen</A><BR>
  <IFRAME src="frame.html"></IFRAME>
 </BODY>
</HTML>

frame.html :

Code:

<HTML>
 <HEAD>
 </HEAD>
 <BODY>
  <SCRIPT type="text/javascript">
   function divNachParent () {
    var div = document.getElementsByTagName('div')[0];
	div.parentElement.removeChild(div);
	parent.document.body.appendChild(div);
   }
   function funktionEinhaengen () {
    parent.testfunc = function () { alert('Hallo'); }
   }
  </SCRIPT>
  <A href="javascript:funktionEinhaengen()">funktion einhaengen</A><BR>
  <A href="javascript:divNachParent()">div nach parent</A><BR>
  <DIV style="width : 100px; height : 100px; background-color : red; " onclick="testfunc()"></DIV>
 </BODY>
</HTML>

Du musst erst den Link "funktion einhaengen" anklicken, danach das "div nach Parent". Es gibt dabei noch weitere, interessante Phänomene: Wenn du das DIV im iframe anklickst, kommt natürlich ein fehler, da die testfunc dort so nicht existiert. Fügst du es aber im Parent ein, nachdem bereits einmal der Fehler kam, wird die testfunc im Parent komischer Weise auch nicht gefunden, selbst, wenn sie dort eingehängt ist (Mit Opera 16 getestet). Im Firefox tritt dieses Bug nicht auf... Wahrscheinlich interpretiert Firefox den Code im onclick jedes mal neu, Opera aber erzeugt einmal eine Funktion daraus und belässt diese im Scope der Frame-Seite.

Aber du siehst schon: Das Frameübergreifende aus- und einhängen von Elementen "mag" nicht jeder Browser. Deswegen würde ich in diesem Fall eher mit innerHTML arbeiten, da dann alle Elemente neu erzeugt werden. Den Code für das Einhängen der Funktion solltest du aber bedenkenlos verwenden können

Oder eben mit EventListenern arbeiten, das sollte auch möglich sein.

protonenbeschleuniger · #15 (**permalink**) 13.05.2014, 11:22

Naja, am einfachsten wäre es die Funktion dort aufrufen wo sie ist.

Das removeChild ist aber nicht nötig.

Die Funktion wird nicht eingehängt. Damit ist das manipulieren des Dokumentenbaums gemeint. Ein vorhandenes Element wird durch insert... umgehängt, d.h. es wird an der alten Stelle entfernt und an der neuen eingehängt. Die Funktion wird einfach nur im parent Scope erzeugt, das ist kein umhängen in diesem Sinne.

MitjaStachowiak · #16 (**permalink**) 13.05.2014, 11:26

Ok, da war ich mal wieder zu faul, das exakt zu forumulieren. Bei der Funktion sollte man eher vom Erzeugen reden.

Zitat:

Naja, am einfachsten wäre es die Funktion dort aufrufen wo sie ist.

Jepp. Aber das geht wohl nicht mit <DIV onclick"testfunc()">. Ich habe inzwischen ja auch eingesehen, dass Eventlistener komfortabler sind

protonenbeschleuniger · #17 (**permalink**) 13.05.2014, 11:42

Zitat:

Zitat von MitjaStachowiak

Jepp. Aber das geht wohl nicht mit <DIV onclick"testfunc()">. Ich habe inzwischen ja auch eingesehen, dass Eventlistener komfortabler sind

In dem Fall sicher:

Die frame.html könnte so aussehen:

Code:

<div id="mydiv" style="width:100px;height:100px;background-color:red">hallo Welt</div>
<span onclick="move()">DIV umhängen</span>
<script>
function testfunc(){
    alert('Hallo')
}
   
function move(){
    var div = document.getElementById('mydiv');
    div.onclick = testfunc; // oder eben addEventListener
    parent.document.body.appendChild(div);
}
</script>

moontan · #18 (**permalink**) 13.05.2014, 11:53

Puh - das ist jetzt erst mal eine Ganze Menge Input.
Vielen Dank dafür euch beiden - da muss ich mir einiges mal genauer anschauen.

Vorhanden ist die function im Parent schon - lässt sich auch ausführen - nur nicht über das onclick im Element selber.

Mein jetziger Workaround ist das onclick aus dem Element rauszunehmen - das Element mit getElementById einzufangen und den onclick dann auf das entstandene object zu legen. Das scheint überall zu funktionieren.
Also das was Protonenbeschleuniger hier schreibt:

Zitat:

var div = document.getElementById('mydiv');
div.onclick = testfunc; // oder eben addEventListener

Letztlich ist das Ganze natürlich nur ein Ausschnitt - die wirklichen Codes sind da um einiges Komplexer. Das sind auch existierende Codes - die ohne Iframe auch funktionieren - es geht dabei darum diese mit relativ wenig Aufwand auch via Iframe funktionieren zu lassen.
Der Iframe selber ist dabei eine Notlösung um JS Code auch asynchron auszuführen obwohl dieser Methoden wie document.write etc. enthalten kann und ähnliches inkompatibles Zeugs ...
Aber das ist eine lange Geschichte.

>>Das Frameübergreifende aus- und einhängen von Elementen "mag" nicht jeder Browser

Das habe ich definitiv schon bemerkt

Wobei das Ganze besser funktioniert als ich ursprünglich vermutet hatte ..

Jedenfalls vielen Dank für eure Hilfe.

LG
Uli

protonenbeschleuniger · #19 (**permalink**) 13.05.2014, 12:18

Zitat:

Zitat von moontan

Vorhanden ist die function im Parent schon - lässt sich auch ausführen - nur nicht über das onclick im Element selber.

Nein ist sie nicht, wie gesagt du hängst nur das DIV um. Damit wird aber nicht der Inhalt des Script Tags ausgeführt. Die Funktion ist nach wie vor im iFrame. Du kannst dir das auch einfach anzeigen lassen, wenn du im DIV onlick="alert(deineFunktion)§ aufrufst, dann siehst du ob diese Funktion in diesem Scope vorhanden ist. In deinem Code, wird 'undefined' angezeigt werden.

Zitat:

Zitat von moontan

Mein jetziger Workaround ist das onclick aus dem Element rauszunehmen - das Element mit getElementById einzufangen und den onclick dann auf das entstandene object zu legen. Das scheint überall zu funktionieren.

Nur dort, wo die Funktion auch wirklich existiert. Da spielt es letztlich keine Rolle wie du sie aufrufst. Du kannst im DIV eine Funktion im iFrame aufrufen über [iframe].contentWindow.deineFunktion()

moontan · #20 (**permalink**) 13.05.2014, 13:42

Zitat:

Nein ist sie nicht

Also wenn ich die Funktion einfach über testfunc() aufrufe kommt kein undefiened sondern die Function wird ausgeführt.

Wenn ich mir mit Firebug den DOM der Parent Seite anschaue ist diese auch im DOM vorhanden.

LG
Uli

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Fremden Frame mit CSS überschreiben	Hackerdeluxe	CSS	0	07.09.2010 19:54
Befehl für Link mit onClick	Synoxis	Javascript & Ajax	9	25.05.2010 14:50
Vom Frame aus einen Refresh steuern	THePointer	Javascript & Ajax	1	21.07.2009 22:07
Scrollbalken im div container statt im frame	Cassiopaia	CSS	1	27.06.2008 18:29
csss seite in frame horiz. scrollbar	Holger (HMR)	CSS	0	15.09.2005 15:05