Question

我必须在客户端的网站上包含一个外部托管的iframe，我想更改body元素的背景颜色。我试过了：

<script type="text/javascript">
function makeitblackgoddamnit(){
    top.frames['bookings'].document.body.style.backgroundColor = "black";
}
</script>

<iframe src="http://www.booking.com/?
aid=123456&tmpl=searchbox&ss=&width=250&bgcolor=000000&textcolor=FFFFFF
&label=label"width="250px" style="margin-left:20px;border:none;" height="250px"
frameborder="none" scrolling="no" style="background-color:black;" name="bookings"
onload="javascript:makeitblackgoddamnit();">
</iframe>

但它不起作用。我也尝试过其他一些版本，但我不想加载外部样式表。我不能使用任何JS库。你能救我吗？

Answer 1

你做不到。允许访问（读取或写入）远程网站的DOM将允许各种令人讨厌的攻击，因此browsers don't。

Answer 2

唯一可行的方法是，如果您可以更改客户网站内引用的CSS。否则，您无法对跨域iFrame执行任何操作。

Answer 3

iframe受same origin policy约束，除非当前和iframe域匹配，否则您无法使用JavaScript（或CSS，iirc）与它们互动。

Answer 4

我遇到了类似的问题，但区别在于我实际上并没有设置iframe的源代码我使用jQuery插入了我想要的html。我的问题是我不知道如何在iframe中包含样式表。

检查以下代码：

<button id="print1" onclick="  $('#frame1').contents().find('body').html($('#div1').html() + $('#tabs-4').html() + $('#tabs-5').html()+ $('#tabs-6').html() ); window.frames['frame1'].print();">Print full report</button>
<iframe id="frame1" style="visibility:hidden;" height=1px></iframe>

如何将单行CSS应用于外部iframe？

4 个答案: