Change background color of body element inside an iframe

问题

I have the following code:

    <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>

On load, I would like to change the background-color to all body elements (which is inside an iframe) to be the value of whatever is in the text input that is in the same tr level as the parent tr of the body.

So I need to get all body elements inside tr['data-type="wysiwyg"] iframe and then set that body elements css background to the value of the closest tr['data-name"background_colour"] siblings input.wp-color-picker.

Hope this makes sense. iframe is in the same domain.

UPDATE: I am able to target the correct body but now I need to figure out how to get the text input value that's in another tr but the same level as the parent tr of body and use that as the body's background-color. Demo: https://jsfiddle.net/pgr8wzqb/9/

回答1:

This will only work if the iframes are on the same domain but you can try:

// 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');
   });
});

You will also need to fix your html, tr can only be a child of a table, thead or tbody tag, not a div

Having seen your fiddle, it is the invalid html that is spoiling your selector:

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

will work if you change your wrapper div tags to table tags - with the invalid html, jQuery won't pick up on any $('tr[data-type="wysiwyg"]') and as you don't have a source for the iframe, you don't need to wait until it is loaded

Fixed fiddle

回答2:

As stated, the document.domains need to be the same and I'm not sure why you have <tr>s in a div, nor what the point of using an iframe is in your case, but:

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

来源：https://stackoverflow.com/questions/28901732/change-background-color-of-body-element-inside-an-iframe

标签

javascript

jquery

html

css

iframe