Изменить цвет фона элемента тела внутри фрейма

У меня есть следующий код:Изменить цвет фона элемента тела внутри фрейма

<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, что и родительский trbody.

Так что мне нужно, чтобы получить все body элементы внутри tr['data-type="wysiwyg"] iframe, а затем установить, что body элементы CSS фона до значения ближайших tr['data-name"background_colour"] братьев input.wp-color-picker.

Надеюсь, что это имеет смысл. iframe находится в одном домене.

UPDATE: Я могу настроить таргетинг на правильный body, но теперь мне нужно, чтобы выяснить, как получить значение ввода текста, который находится в другом tr, но на том же уровне, что и родитель tr из body и использовать его в качестве background- тела цвет. Demo: https://jsfiddle.net/pgr8wzqb/9/

источник

2015-03-06 renny

Похож на простой селектор? что ты уже испробовал? – Sphaso

iframe являются проблематичными для javascript, которых нет в них. потерять iframe и загрузить его содержимое через ajax вместо – Ewan

, так что вы говорите: iframe внутри # first изменится на основе ввода текста в #first, и то же самое произойдет и с # секундой? – Dhiraj

Это будет работать только в том случае, если плавающие фреймы находятся на том же домене, но вы можете попробовать:

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

источник

2015-03-06 15:20:29 Pete

, который должен находиться в таблице. Я отредактировал мой вопрос. – renny

см. Мое редактирование и скрипка – Pete

да, я тоже это заметил. Спасибо что подметил это. теперь мне просто нужно изменить «красный» на правильное соответствующее значение ввода текста. – renny

Как указано, document.domains должны быть одинаковыми, и я не знаю, почему у вас есть <tr> с в DIV, ни то, что точки с помощью 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); 
});

источник

2015-03-06 15:34:56 im1dermike

Изменить цвет фона элемента тела внутри фрейма

ответ

Смежные вопросы