How to apply a single line of CSS to an external iframe?

I have to include an external hosted iframe on a client's website, and I want to change the background-col开发者_StackOverflow社区or of the body element. I tried:

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

but it doesn't work. I also tried some other versions, but I don't want to load an external style sheet. I cannot use any JS libraries. Can you help me?

---

You can't. Allowing access (read or write) to the DOM of remote websites would allow for all sorts of nasty attacks, so browsers don't.

---

The only way this is possible is if you can alter the CSS referenced inside the Client's website. Otherwise, there isn't much you can do to a cross-domain iFrame.

---

Iframes are subject to the same origin policy, you cannot interact with them using JavaScript (or CSS, iirc) unless the current and iframe domains match.

---

I'm having a similar problem, but the difference is that I'm not actually setting a source for the iframe I insert the html I want using jQuery. My problem is that I don't know how to include a style sheet to the iframe.

Check the code below:

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