Ändern CSS-Eigenschaften der Elemente in iframe

Question

Hier ist, was mein typisches Feld sieht aus wie ...

<input class='live-field' type=color data-el='#header' data-prop='background'> 

Jedes Feld hat Klasse live-field, Attribut data-el targetted Element (e) Wähler und data-prop mit Eigentum zu ändern.

Jedes Mal, wenn der Wert in der Eingabe geändert wird, möchte ich die CSS-Eigenschaft data-prop der Elemente, die von data-el ausgewählt wurden, auf den Wert der Eingabe geändert werden.

Im Moment habe ich diese haben ...

$('.live-field').change(function(){ 
    var $t = $(this); 
    $($t.data('el')).css($t.data('prop'), $t.val()) 
}); 

Anscheinend nicht funktionieren Coz $($t.data('el')) für Elemente in der doc nicht in iFrame aussehen ...

Hier ist meine Plunker. https://plnkr.co/edit/uJcSwtE2xheJnS1vOdde?p=preview

Zum Beispiel ... Wenn ich Wert dieser Eingabe ändern ...

<input class='live-field' type=color data-el='#header' data-prop='background'> 

zu #f00, die Hintergrundfarbe des Elements #headerin iframe sollte #f00 (rot) geändert werden.

Answer 1

Sie sollten die Methode .contents() von jQuery verwenden können, um auf das iFrame-DOM zuzugreifen, solange der Iframe dieselbe Domäne wie der interaktive Inhalt besitzt. Ändern Sie Ihre onChange Ereignis den folgenden Code zu verwenden, sollte es tun:

$('.live-field').change(function(){ 
    var $t = $(this); 
    $('#iframe').contents().find($t.data('el')).css($t.data('prop'), $t.val()) 
}); 

Bearbeiten zur Klarstellung: Die iFrame und Ihre Eingaben Muss Aktien die gleiche Domain, sonst wird der Browser diese Art von Funktionalität nicht erlaubt. Siehe this article on Same-Origin Policy for more info on why.