I have a feeling this is another impossible request, but... Is it possible to override the width of an iframe friend selector element using only an external stylesheet?
I have a page that uses the iframe friends selector, but I cannot edit the HTML in any way, or us开发者_如何学Ce JavaScript. The code looks essentially like this in Firebug:
<div id="container">
<fb:serverfbml class="fb_iframe_widget" width="718px">
<script type="text/fbml">
<span>
<iframe id="fdf5a6b542baf6" class="fb_ltr" scrolling="no" name="f19fe08b5aec2e4" style="border: medium none; overflow: hidden; width: 718px; height: 555px;" src="about:blank">
</span>
</fb:serverfbml>
</div>
The issue is that my container is only 500px wide, and hides any overflow:
#container { width:500px; overflow:hidden; }
Which results in the invite box being cut off.
I have managed to override the inline styles on both the fb
control and the iframe like this:
.fb_iframe_widget[style], #container iframe[style] {
width:500px !important; /* yes, I know, but it really doesn't work otherwise */
}
But inside the iframe there is an element called #fb_multi_friend_selector
that is being forced to a width of 718px by a CSS file ending in a PHP extension. I'm assuming that this is a dynamic CSS file that is somehow reading the style attribute of the iframe and forcing that width value, but I have no idea how to override it from my stylesheet. Is it possible to do this?
You cannot access the contents of an iframe that is not from your own domain due to the same origin policy. This is to prevent cross-site scripting attacks.
精彩评论