CODEWITHSUNDEEP
jquerycssiframecross-domain
Minghui Yu
Minghui Yu

Reputation: 1363

Use JQuery to modify CSS for content in an iFrame

I have a Twitter widget (a Javascript widget that embeds an iFrame) on my site. Previously, I used

iframe[id^='twitter-widget-']{ width:100% !important;}

to change the widget width to 100%, instead of default 520px. It worked very well until yesterday. For somehow, that CSS setting on iframe does not work anymore. I checked the iFrame source code, it appears Twiiter adds this 

.timeline {
  max-width: 520px;
 }

Because this iframe is from twitter, I have no way to use css to modify .timeline. I tried to use Jquery/javascript:

$("#twitter-widget-0").contents().find(".timeline").css("max-width","100%");

But it seems only working on console. I put this line of JavaScript in a PHP template file and it does not work. I have tried body onLoad, window onload and document onload and none works. I also put this javascript at the end of my template file and it does not either.

How to resolve this issue?

Thanks,

Upvotes: 0

Views: 4081

Answers (1)

Pratik Shah
Pratik Shah

Reputation: 828

You can not do any DOM manipulation using JavaScript to any cross domain iFrame! If iFrame is of the same domain than only you will be able to do that!

Check out these related questions

  1. Can I apply CSS to the elements within an iframe?
  2. How to apply CSS to iframe?

In short, no. You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe.

Upvotes: 2

Related Questions