iFrame mit jQuery ansteuern klappt nicht

Quests Sohn

Mitglied
Hallo,

ich möchte die CSS einer per iFrame eingebundenen Seite anpassen.
Dazu soll sich jQuery's .content Funktion eignen.
Angeblich soll es nach Einbinden von jQuery in den Header über eine einfache Function nach dem iFrame-Tag wie folgt funktionieren:

Code:
<iframe id="myframe" src="http://domain.de"  ></iframe>

<script>// <![CDATA[
$('myframe').load( function() {
  $( "myframe" ).contents().find( "body" ).css( "font-family", "Times, serif" );
});
// ]]></script>

Leider reagiert der iFrame in keinster Weise auf meine Anweisung.
Was mache ich falsch?

Wer kann mir einen Tipp geben?
 
Dem ID-Bezeichner fehlt das #-Zeichen.
Javascript:
$('#myframe').load( function() {
  $( "#myframe" ).contents().find( "body" ).css( "font-family", "Times, serif" );
});
 
Oh, das ist natürlich vorhanden. Habe ich hier vergessen, sorry. Trotzdem reagiert der iFrame nicht ...
Hier vergessen? o_O

Da das (korrigierte) Script bei mir funktioniert, wird bei dir mindestens eine dieser Voraussetzungen nicht erfüllt:
  1. Die erforderliche jQuery-Bibliothek (z.B. jquery.min.js) wird im Hauptdokument geladen
  2. Die eingebundene Seite befindet sich auf dem selben Server, Stichwort: Same-Origin-Policy
  3. Falls Punkt 2 nicht zutrifft, bietet/unterstützt der Fremdserver Cross-Origin Resource Sharing
 
Zuletzt bearbeitet:
Ja, Punkt 2 trifft zu, das ist ja gerade der Sinn, dachte ich.

Wären die beiden Seiten auf demselben (also meinem) Server, wäre ich ja ohne einen Umweg über jQuery in der Lage, der eingebundenen Seite beliebige Stylesheets zuzuweisen.
Ich möchte eine externe Seite von einem fremden Server einbinden, ihr aber ein Aussehen geben, als gehöre sie nahtlos zu meinem Design.

Ist es tatsächlich so, dass man Seiten von einem fremden Server nicht via jQuery auslesen, quasi neu rendern und dann einbinden kann?
 
Ja, Punkt 2 trifft zu, das ist ja gerade der Sinn, dachte ich.

Wären die beiden Seiten auf demselben (also meinem) Server, wäre ich ja ohne einen Umweg über jQuery in der Lage, der eingebundenen Seite beliebige Stylesheets zuzuweisen.
Ich möchte eine externe Seite von einem fremden Server einbinden, ihr aber ein Aussehen geben, als gehöre sie nahtlos zu meinem Design.

Ist es tatsächlich so, dass man Seiten von einem fremden Server nicht via jQuery auslesen, quasi neu rendern und dann einbinden kann?
Du widersprichst dich, denn laut deiner Aussage und Nachfrage treffen Punkt 2 und 3 nicht zu!

Und ja, es verhält sich tatsächlich so, wenn der Fremdserver kein "CORS" anbietet, wird der Zugriff auf diese Seite(n) mittels JS (jQuery) und/oder CSS unterbunden, da hier dann "SOP" greift.

Bitte hierzu meine beiden genannten Links studieren!
 
Zuletzt bearbeitet:
Danke, SpiceLab, die Links habe ich mir angesehen. Demnach scheint es so, wie von mir vorgestellt, nicht zu funktionieren.

Ich war/bin mir nicht bewusst, wo ich mir widersprochen hätte. Ich möchte die Seite www.abc.de/formular als iFrame in die Seite www.xyz.de einbinden.
Beide Seiten liegen auf unterschiedlichen Servern. Die Voraussetzung, dass offenbar beide auf demselben Server liegen müssen, ist somit nicht gegeben.

Verbleibt nur noch die Frage, ob es vielleicht IRGENDEINEN Weg gibt, eine per iFrame zugeladenen Seite eine eigene CSS Datei zuzuweisen.
Vielleicht nicht per jQuery, sondern über irgendein WP Plugin oder so. Auvch wenn der externe Server "etwas dagegen hat", gibt es vielleicht einen Workaround?! Weisst Du dazu etwas?
 
Zuletzt bearbeitet:
Du kannst per PHP (oder auch js) den Content den du darstellen willst runter laden und dann direkt in deine Seite einbauen. Die Frage ist dann natürlich ob das Formular noch funktioniert.
 

Neue Beiträge

Zurück