4

I am getting into a problem with Twitter widget Timeline, but the issue is applicable to any script.

I want to embed Twitter widget Timeline (end result is an iframe). Seems like the way of adding the iframe is inserting a script in the post which will call another script with functions that will then execute a function to load/create the final iframe.

<script>
!function(d, s, id) {

    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
    if (!d.getElementById(id)) {
        js = d.createElement(s);
        js.id = id;
        js.src = p + "://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);
    }
}(document, "script", "twitter-wjs");
</script>

In my website I have posts (post1,post2,post3) which display partial content of the post. When a user clicks in the title of one of these, The partial post is dettached from the Dom, the full post is called with Ajax and attached into the Dom. Then when closing the full loaded post, its content is removed from the Dom and the partial post content is attached again. (this attaching dettaching is to prevent conflicts with #ids).

When my partial content is attached again into the post, the iframe is empty and the script will not execute again to load it. (even if I made a custom dumb script). This empty iframe happens only with Twitter widget, not with other iframes such as Youtube videos.

Could someone please guide me here?

Update:

Several things here. The script added in the post seems to load twitter widget script to the head. The post script checks if this head script exists before creating the iframe. This implies the iframe is not created in the full post (ajax) load. I can delete the head script and then the iframes gets created correctly in the full post.

But this "trick" doesnt work for the reattached content. The problem remains, when I attach the content back the post script doesn't run again (any script).

Update2:

A fiddle with the retach issue http://jsfiddle.net/KsFJR/

Andrew
  • 5,290
  • 1
  • 19
  • 22
Alvaro
  • 9,247
  • 8
  • 49
  • 76
  • Did you find a solution? I'm running in the same issue. I tried to go for jhert's approach but can't figure out how. My elements are already being .hide()-ed and it still doesn't work. – Javaaaa Dec 12 '14 at 18:04

2 Answers2

0

Have you tried removing the iFrame from the DOM completely and starting the script again?

Community
  • 1
  • 1
Moritz Möller
  • 116
  • 1
  • 5
  • If I remove the iframe nothing happens. The point is the script (any script) doesnt run again when I attach it. I noticed that when I load the full post dynamically the script runs, but it doesnt do what it should because it checks if another script is already loaded in the page. twitter widget script (which get loaded in the first call) – Alvaro Feb 26 '14 at 15:44
0

Consider hiding/showing your content instead of detaching and reattaching. It will be worth the rewrite even though it sounds like you might need to get clever with your ids.

The iframes will reload their content whenever you move them (including detaching and reattaching) in the DOM. See related question

It seems like twitter's script isn't expecting you to be reloading the contents of the iframe, so instead of trying to fight with it you will probably be better off leaving it alone. Hiding/showing the posts will be able to get around this issue since those operations won't modify the DOM.

Community
  • 1
  • 1
hert
  • 1,012
  • 8
  • 16
  • Thanks for the comment. Leaving the content "solves" the issue, but leaves the potential ones of the ids. I would be ok if the iframes contents reloaded, but its not the case, they just appear empty. – Alvaro Feb 26 '14 at 23:23
  • I think what's happening is that twitter's script is doing some extra work behind the scenes (either by messaging or fiddling with the iframe hash) to get that content to show up in the iframe. That would explain why simply reloading them causes the frames to be empty -- the script isn't doing any extra work to make content appear. It sounds like you don't like this approach but I think it will end up giving you the least headaches. Besides, id's should be used as unique identifiers. If there is an issue of duplicate id's then you might be using them wrong. – hert Feb 27 '14 at 19:29