javascript - 更改 iframe 中元素的 CSS 属性

Question

这是我的典型领域的样子......

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

每个字段都有类 live-field，属性 data-el 目标元素选择器和 data-prop 属性要改变.

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

现在我有这个...

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

显然这行不通，因为 $( $t.data('el') ) 会在文档中查找元素，而不是在 iFrame 中...

这是我的笨蛋。 https://plnkr.co/edit/uJcSwtE2xheJnS1vOdde?p=preview

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

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

到#f00，元素#header iframe的背景颜色应该改为#f00 (红色)。

Answer 1

您应该能够使用 jQuery 的 .contents() 方法访问 iFrame DOM，只要 iframe 与交互式内容共享相同的域。将 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.