0

I'm loading in an iframe from an external site (twitter feed) and want to use JS to change the css styles.

The JS code is:

$(".twitter-timeline").contents().find(".p-name").css("font-size","16px");
});

The problem is that I can't seem to get this to execute after the iframe's contents have loaded. I tried opening the function with:

$('iframe.twitter-timeline').load(function(){

or

$('#twitter-widget-0').load(function(){

but they seem to be triggering before the iframe finishes loading. When I refresh the page, the styles are applied as intended. But if i clear my cache and retest again it won't work unless i refresh.

If I use

window.setTimeout(function(){

and give it 3 seconds or so, it works sometimes, depending on internet speed, so I prefer not to use it.

midknyte
  • 587
  • 3
  • 6
  • 18

2 Answers2

0
<iframe id='myframe' src='http://url/doit.php' onload="onLoadHandler();"></iframe>

<script type="text/javascript">
function onLoadHandler() {
    $(".twitter-timeline").contents().find(".p-name").css("font-size","16px");
}
</script>

Set an onload handler for the iframe then run your code inside the function.

kartikluke
  • 2,375
  • 1
  • 19
  • 32
  • thanks, i should have mentioned that the way twitter does it is they write in the iframe code from a js code, so I can't add anything to it as far as I know. – midknyte Feb 06 '15 at 09:13
  • Is it possible the iframe doesn't exist at the time you're setting the load function? You can try logging it out `console.log($('iframe.twitter-timeline').length > 0);` If it doesn't exist maybe you're load handler isn't getting set. And you might need to run it after the Twitter code has run. – kartikluke Feb 06 '15 at 09:52
0

sorry, found the answer in another thread, worked perfectly: Styling the new twitter widget (embedded timeline)

i used jquery.waituntilexists.js https://gist.github.com/buu700/4200601

Community
  • 1
  • 1
midknyte
  • 587
  • 3
  • 6
  • 18