Question

I have to include an external hosted iframe on a client’s website, and I want to change the background-color 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?

Answer 1

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.