更改 iframe 内 body 元素的背景颜色答案

【问题标题】：Change background color of body element inside an iframe更改 iframe 内 body 元素的背景颜色
【发布时间】：2015-03-06 15:12:26
【问题描述】：

我有以下代码：

    <table id="first">
       <tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker">
          <td class="my-input">
            <input type="text" class="wp-color-picker"> 
          </td>
       </tr>
       <tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg">
          <td class="my-input">
             <iframe>
                <html>
                  <body id="tinymce" class="mce-content-body">
                       some text
                  </body>
                 </html>
               </iframe>
          </td>
      </tr>
   </table>
   <table id="second">
      <tr class="my-field my-field-color-picker" data-name="background_colour" data-type="color_picker">
         <td class="my-input">
            <input type="text" class="wp-color-picker"> 
         </td>
       </tr>
       <tr class="my-field my-field-wysiwyg" data-name="text_block" data-type="wysiwyg">
          <td class="my-input">
              <iframe>
                  <html>
                    <body id="tinymce" class="mce-content-body">
                         some text
                    </body>
                  </html>
              </iframe>
          </td>
       </tr>
   </table>

在加载时，我想将 background-color 更改为所有 body 元素（位于 iframe 内）作为文本输入中处于相同 tr 级别的任何值的值作为body 的父tr。

所以我需要在tr['data-type="wysiwyg"] iframe 中获取所有body 元素，然后将body 元素css 背景设置为最接近的tr['data-name"background_colour"] 兄弟姐妹input.wp-color-picker 的值。

希望这是有道理的。 iframe 在同一个域中。

更新：我能够定位正确的 body，但现在我需要弄清楚如何获取另一个 tr 中的文本输入值，但与 body 的父级 tr 和使用它作为身体的背景颜色。演示：https://jsfiddle.net/pgr8wzqb/9/

【问题讨论】：

看起来像一个简单的选择器？到目前为止你尝试过什么？
iframe 对于不在其中的 javascript 来说是有问题的。丢失 iframe 并通过 ajax 加载其内容
所以你的意思是，#first 中的 iframe 将根据 #first 中的文本输入而改变，同样的情况也会发生在 #second 中？
是的，这是真的。页面加载时文本输入的值已经存在。
我认为皮特先生的最后一条评论完美地回答了这个问题。

标签： javascript jquery html css iframe

【解决方案1】：

这仅在 iframe 位于同一域中时才有效，但您可以尝试：

// change the selector to match your iframes
$("iframe").each(function() {
   // you seem to need to load the iframe first otherwise the change will revert to any style sheet
   $(this).load(function () {
       // get the body tag inside the iframe and set the css
       $(this).contents().find('body').css('background-color', 'red');
   });
});

您还需要修复您的 html，tr 只能是 table、thead 或 tbody 标签的子标签，而不是 div

看过你的小提琴，是无效的 html 破坏了你的选择器：

$('tr[data-type="wysiwyg"]').find('iframe').contents().find('body').css('background-color', 'red');

如果您将包装器 div 标签更改为表格标签，则将起作用 - 使用无效的 html，jQuery 不会选择任何 $('tr[data-type="wysiwyg"]') 并且由于您没有 iframe 的源代码，因此您不需要等到加载完毕

Fixed fiddle

【讨论】：

是的，我也注意到了。感谢您指出了这一点。现在我只需要将“红色”更改为正确的相应文本输入值。
您可以这样做：jsfiddle.net/pgr8wzqb/11（在文本框中输入 red，显然这会根据您将颜色输入文本框的方式而改变）
页面加载时文本框的值已经存在，而不是输入的内容。
啊，好吧，试试这个然后jsfiddle.net/pgr8wzqb/12，或者如果你的表结构中有多个输入和iframe，这个是：jsfiddle.net/pgr8wzqb/13
谢谢皮特。非常非常有帮助。最终根据您的情况进行了处理：jsfiddle.net/pgr8wzqb/14

【解决方案2】：

如上所述，document.domains 必须相同，我不确定为什么您的 div 中有 <tr>s，也不知道在您的情况下使用 iframe 有什么意义，但是：

$('.wp-color-picker').on('change', function () {
    var color = GetValueFromColorPicker();
    var iframe = $(this).parent().parent().find('iframe');        
    $(iframe).contents().find('body').css('background-color', color);
});

【讨论】：