更改iframe中body元素的背景颜色 [英] Change background color of body element inside an iframe
问题描述
我有以下代码：
<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 内）与主体 c的父 tr 级相同的 tr code>。
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.
所以我需要获取中的所有元素 tr ['data-type = wysiwyg] iframe 然后将 body 元素css background设置为最接近的值 tr ['data- namebackground_colour] siblings input.wp-color-picker 。
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.
希望这有意义。 iframe在同一个域中。
Hope this makes sense. iframe is in the same domain.
更新：我可以定位正确的正文，但现在我需要找出如何获得另一个 tr 中的文本输入值，但与父 tr 的 body 并使用它作为body的背景颜色。
演示： https://jsfiddle.net/pgr8wzqb/9/
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/
推荐答案
这只会在iframe位于同一网域时才能使用，但您可以尝试：
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');
});
});
您还需要修复您的html， tr 只能是表， thead 或 tbody 标签，而不是 div
You will also need to fix your html, tr can only be a child of a table, thead or tbody tag, not a div
看到你的小提琴后， selector：
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');
将工作，如果你将你的包装div标签更改为表格标签 - t接受任何 $（'tr [data-type =wysiwyg]'），因为你没有iframe的来源，你不需要等待，直到它被加载
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
这篇关于更改iframe中body元素的背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
