1

Problem : a twitter widget on a Wordpress website disappears whenever I resize the window. I think it is caused by some scripts that comes with a theme. (after the widget disappearing, If I see the source, I still have <iframe><head></head><body></body></iframe> tags stays there but the contents inside <head></head> and <body></body> is gone)

So I am trying to solve this problem by saving the html contents of the <head></head> and <body></body> of the iframe and automatically append them in the corresponding tags whenever the window resize event detected.

var head = jQuery('iframe.twitter-timeline').contents().find('head').contents();
var body = jQuery('iframe.twitter-timeline').contents().find('body').contents();


jQuery(window).on('resize', function(){
    jQuery('iframe.twitter-timeline').contents().find('head').append(head);
    jQuery('iframe.twitter-timeline').contents().find('body').append(body);
});

above is the code I am testing with,

If I type jQuery('iframe.twitter-timeline').contents().find('body').contents(); part inside the Chrome's console, I can get the contents and have no problem saving it in a variable and implement whole functionality exactly the way I want.

However, if I save the above scripts in a footer.php file and implement, then it does not work at all. Moreover, the Chrome console returns nothing (empty variable) when I try check what's in the variables, head and body.

Could anyone please tell me, If I am going in right direction? or there is a better (safer / more proper) way to solve this kind of problem? How I can save the contents(html) of the iframe?



========= update // it's solved =============

I solved out this problem by changing the code

window.onload = function () {
    var head = jQuery('iframe.twitter-timeline').contents().find('head');
    var body = jQuery('iframe.twitter-timeline').contents().find('body');

    jQuery(window).on('resize', function(){
        jQuery('iframe.twitter-timeline').contents().find('head').append(head);
        jQuery('iframe.twitter-timeline').contents().find('body').append(body);
    }); 
};

I was quite sure it would work somehow because it worked in chrome's console but just couldn't make it working in a php file as mentioned initially. Anyway, jQuery(document).ready(function(){ // bla, bla, bla }); didn't work for me but somehow window.onload = function(){} worked exactly the way I wanted. So the problem has been solved.

But Thanks for replies guys.

Jim Kim
  • 11
  • 4
  • How I can save the contents(html) of the iframe? Unfortunately you can not in a manner that is worth the effort. – MattSizzle Aug 13 '14 at 03:33
  • 1
    possible duplicate of [jQuery/JavaScript: accessing contents of an iframe](http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) – MattSizzle Aug 13 '14 at 03:34
  • @Matt: I already read the article and replies but wasn't successful for me. I think it's me who don't know how to change my code properly though. The site is working now anyway and I appreciate for you reply. Thanks very much. – Jim Kim Aug 13 '14 at 06:45
  • 1
    @JimKim: Please add your solution as an answer instead of putting it on the question, so people can see that there is a solution. – StriplingWarrior Aug 13 '14 at 23:23

0 Answers0