0

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,

Minghui Yu
  • 1,323
  • 2
  • 20
  • 27

1 Answers1

2

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.

Community
  • 1
  • 1
Pratik Shah
  • 788
  • 5
  • 8
  • You mean why we can still see the console outputs, right? So for that question, consoles are just a way of displaying contents and/or outputs and don't need any inputs or dependencies for that! Just like DOM you don't have access to iFrame's functions as well. – Pratik Shah Jun 26 '15 at 20:51