Elemente in einen untergeordneten iframe mit Javascript oder jQuery schreiben

Question

Elemente in einen untergeordneten iframe mit Javascript oder jQuery schreiben

Gefragt el 15 de Juni, 2009: Wann wurde die Frage gestellt
104531 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Ich habe etwas Ähnliches:

<!doctype html>
<html>
  <body>
     <iframe id="someFrame"></iframe>
  </body>
</html>

Und ich möchte jQuery verwenden, um Elemente so zu schreiben, dass das vollständige äquivalente HTML wie folgt aussehen würde:

<!doctype html>
<html>
  <body>
    <iframe id="someFrame">
      <!-- inside the iframe's content -->
      <!-- <html><body>  -->
      <div>A</div>
      <div>B</div>
      <div>C</div>
      <!-- </body></html> -->
    </iframe>
  </body>
</html>

Alternativ kann auch ein einfaches altes Javascript verwendet werden.

Danke.

bearbeiten : Nach ein wenig mehr Recherche scheint es, dass ich nach einem IE-Äquivalent der contentDocument-Eigenschaft eines iframe suche. "contentDocument" ist ein W3C-Standard, den FF unterstützt, der IE aber nicht. (Überraschung Überraschung)

Gefragt el 15 de Juni, 2009 von Jeff Meatball Yang

Answer 1

5 Antworten

Answer 2

98voto

Mike Robinson Punkte 24535

Man kann beides tun, man muss nur anders zielen:

var ifrm = document.getElementById('myIframe');
ifrm = ifrm.contentWindow || ifrm.contentDocument.document || ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write('Hello World!');
ifrm.document.close();

Beantwortet el 15 de Juni, 2009 von Mike Robinson (24535 Punkte )

2 Stimmen

Aha - contentWindow. Ich fand tatsächlich, dass open und close notwendig sind, um mit jquery zu beginnen...

Kommentiert el 15 de Juni, 2009 von Jeff Meatball Yang

0 Stimmen

Funktioniert diese Methode nicht mehr. Ich erhalte die Fehlermeldung Unsafe JavaScript attempt to access frame with URL "URL1" from frame with URL "URL2". Domänen, Protokolle und Ports müssen übereinstimmen. Die unten beschriebene Bridge-Methode funktioniert jedoch einwandfrei.

Kommentiert el 26 de August, 2012 von kay am see

1 Stimmen

Ich weiß, dies ist ein altes Thema, aber in welchem Fall würden Sie jemals ifrm.contentDocument.document.document ?

Kommentiert el 18 de September, 2013 von ars265

Anzeigen 3 weitere Kommentare

Answer 3

36voto

Jeff Meatball Yang Punkte 35809

Nach einigen Nachforschungen und einer bestätigenden Antwort von Mike, habe ich diese Lösung gefunden:

  var d = $("#someFrame")[0].contentWindow.document; // contentWindow works in IE7 and FF
  d.open(); d.close(); // must open and close document object to start using it!

  // now start doing normal jQuery:
  $("body", d).append("<div>A</div><div>B</div><div>C</div>");

Beantwortet el 15 de Juni, 2009 von Jeff Meatball Yang (35809 Punkte )

13 Stimmen

Interessant. Wissen Sie, warum Sie das Öffnen und Schließen durchführen müssen?

Kommentiert el 16 de Juni, 2009 von Nosredna

0 Stimmen

Das war großartig! Danke Jeff!

Kommentiert el 16 de September, 2013 von Metropolis

0 Stimmen

Dies ist die perfekte Lösung für ein Problem, das ich mit codemirrors hatte editor.getValue() !

Kommentiert el 8 de August, 2019 von hannacreed

Answer 4

12voto

Mori Punkte 8015

Es gibt zwei zuverlässige Methoden für den Zugriff auf die document Element innerhalb eines iframe :

1. Die fenster.rahmen Eigentum:

var iframeDocument = window.frames['iframeName'].document; // or // var iframeDocument = window.frames[iframeIndex].document;

Demo

2. Die contentDocument Eigentum:

var iframeDocument = document.getElementById('iframeID').contentDocument; // or // var iframeDocument = document.getElementById('iframeID').contentWindow.document;

Demo

Beantwortet el 13 de Januar, 2014 von Mori (8015 Punkte )

0 Stimmen

Perfekt, das JSFiddle war sehr hilfreich. Dankeschön!

Kommentiert el 4 de Dezember, 2014 von dotancohen

Answer 5

7voto

jwl Punkte 9898

Ich lehne mich hier weit aus dem Fenster und behaupte, dass die bisher vorgeschlagenen Antworten nicht möglich sind.

Wenn dieser iframe tatsächlich ein src="somepage.html" hat (was Sie angegeben haben sollten, und wenn nicht, wozu dann iframe?), dann glaube ich nicht, dass Jquery HTML direkt über Frames hinweg in allen Browsern manipulieren kann. Meiner Erfahrung nach kann die Seite, die den Frame enthält, keine Funktionen direkt aufrufen oder irgendeine Art von Javascript-Kontakt mit der iframe-Seite herstellen.

Ihre "somepage.html" (die Seite, die in den Iframe geladen wird) muss zwei Dinge tun:

Übergabe eines Objekts an die enthaltende Seite, das als Brücke verwendet werden kann
Haben Sie eine Funktion, um den HTML-Code wie gewünscht einzustellen

So könnte somepage.html zum Beispiel so aussehen:

<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
    var bridge={
        setHtml:function(htm) {
            document.body.innerHTML=htm;
        }
    }

    $(function() { parent.setBridge(bridge); });

//--></script>
</head>
<body></body>
</html>

und die darin enthaltene Seite könnte wie folgt aussehen:

<!doctype html>
<html>
<head>
<script src="jquery.js">
</script>
<script language=JavaScript>
<!--//
var bridge;
var setBridge=function(br) {
    bridge=br;
    bridge.setHtml("<div>A</div><div>B</div><div>C</div>");
    }
//-->
</script>
</head>
<body><iframe src="somepage.html"></iframe></body>
</html>

Dies mag ein wenig verworren erscheinen, aber es kann in verschiedene Richtungen angepasst werden und sollte zumindest in IE, FF, Chrome und wahrscheinlich Safari und Opera funktionieren...

Beantwortet el 15 de Juni, 2009 von jwl (9898 Punkte )

0 Stimmen

Danke für Ihre Antwort - aber ich möchte diesen iframe verwenden, um HTML wie einen Rich-Text-Editor zu erstellen. Ich setze das src-Attribut nicht, da es aus dem "oberen" Fenster gelöscht und neu komponiert werden soll. Auch - ich denke, es muss möglich sein, in das Kind DOM zu erreichen - siehe meine Bearbeitung in der OP.

Kommentiert el 15 de Juni, 2009 von Jeff Meatball Yang

0 Stimmen

Gibt es irgendeinen Grund, warum Sie einen iframe und nicht ein div verwenden müssen? scheint, wie die div wäre einfacher und weniger wahrscheinlich zu brechen über Browser.

Kommentiert el 15 de Juni, 2009 von Jeremy Wall

1 Stimmen

Wie sich herausstellt, gibt es dafür einen Grund. Sie müssen externes Javascript platzieren und wollen nicht, dass es Ihre Seite beschädigt. Aber der Referer muss auch mit Ihrer Top-Level-Domain übereinstimmen. Dies ist die gängigste Methode, um Anzeigen auf einer Seite zu platzieren: <iframe></iframe> + document.write('<script tags go here>')

Kommentiert el 10 de Dezember, 2015 von KateYoak

Answer 6

1voto

damijank Punkte 71

Ich habe herausgefunden, dass dies browserübergreifend kompatibel ist... eine kleine Kreuzung aus früheren Antworten und ein bisschen Trial & Error meinerseits :)

Ich verwende dies für das Herunterladen eines Berichts, oder, wenn ein Fehler (Meldung) auftritt, wird dies im iFrame angezeigt. Die meisten Benutzer werden den iFrame wahrscheinlich ausblenden, ich verwende ihn multifunktional.

Das Problem ist, dass ich den Inhalt des iFrames jedes Mal löschen muss, wenn ich auf die Schaltfläche zum Herunterladen des Berichts klicke - der Benutzer kann Parameter ändern und es passiert, dass es keine Ergebnisse gibt, die dann im iFrame als Meldung angezeigt werden. Wenn es sind bleibt der iFrame leer - denn der unten stehende Code hat ihn geleert und die window.open(...) Methode erzeugt eine Content-Disposition: attachment;filename=... Dokument.

var $frm = $("#reportIFrame");
var $doc = $frm[0].contentWindow ? $frm[0].contentWindow.document : $frm[0].contentDocument;
var $body = $($doc.body);
$body.html(''); // clear iFrame contents <- I'm using this...
$body.append('<i>Writing into the iFrame...</i>'); // use this to write something into the iFrame
window.open(Module.PATH + 'php/getReport.php' + Report.queryData, 'reportIFrame');

Ich habe keinen Browser, der Folgendes unterstützt contentDocument aber ich habe es so kodiert, also lasse ich es so. Vielleicht hat jemand ältere Browser und kann Kompatibilität Bestätigung/Probleme posten?

Beantwortet el 14 de April, 2014 von damijank (71 Punkte )

Elemente in einen untergeordneten iframe mit Javascript oder jQuery schreiben

Antworten

1. Die fenster.rahmen Eigentum:

2. Die contentDocument Eigentum:

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Elemente in einen untergeordneten iframe mit Javascript oder jQuery schreiben

Antworten

1. Die fenster.rahmen Eigentum:

2. Die contentDocument Eigentum:

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: