Question

我有以下代码：

    <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的父tr相同的body级别。

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

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

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

Answer 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

Answer 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);
});

更改iframe中body元素的背景颜色

2 个答案: