Question

以下是我的典型字段......

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

每个字段都有类live-field，属性data-el目标元素选择器和data-prop，其中包含要更改的属性。

每次更改输入中的值时，我希望data-prop选择的元素的CSS属性data-el更改为输入值。

现在我有这个......

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

显然这不会工作因为$( $t.data('el') )会在文档中查找不在iFrame中的元素......

例如......如果我更改此输入的值...

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

到#f00，iframe 中元素#header 的背景颜色应更改为#f00（红色）。

Answer 1

只要iframe与交互式内容共享相同的域，您就应该能够使用jQuery的.contents()方法来访问iFrame DOM。更改onChange事件以使用以下代码应该可以解决问题：

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

编辑以澄清：iFrame和您的输入必须共享同一个域，否则浏览器将不允许此类功能。见this article on Same-Origin Policy for more info on why.