Issue with disappearing content in iframes of embedded tweets


Hi there,

Our application is using the search API to fetch tweets, and then we want to display those tweets as the “rich” embed style tweet that you get when copying the embed code directly from a tweet by including the Twitter widget.js in your page so that elements in the form of blockquote.twitter-tweet, get formatted by widget.js to display nicely.

That was a bit of a tongue-twister to get out.

Now, we basically have it working. Upon the user entering the search phrase, we pass the search phrase to the API, we get the results back from the Twitter Search API, and we construct the blockquotes so that widget.js can work its magic and render the embedded tweets.

But here is where we run into problems. Our application allows a user to switch between tabs of content, of which ONE of the tabs contains the tweet results from the search they ran. But when the user switches tabs, and then returns to the tab where the tweet results were displayed, then upon returning to the tab, all of the tweet embed iframes that were created by widget.js are still there, but they are EMPTY, the html, head and body tags within the iframe are empty. As if somehow they just disappeared from the DOM.

When I say ‘tabs’ I am referring to tabs we are rendering on our page with javascript. When a user switches between tabs we change the value of a variable to be one specific to the tab. All of the data for the tabs (including tweets on the twitter tab in question) are stored in a data object. The important point to note is that when switching between tabs, all of them render fine, except the Twitter one, and with the Twitter one, we know that it’s the iframes that are coming back empty.

Now, we don’t know exactly why that’s happening, but in our attempts to mitigate it so far we are seeing another weird thing: we simply can’t make a call to the function twttr.widgets.load(). Console says that it is an undefined function. This is despite the fact that widgets.js is loaded …

Any help would be greatly appreciated.

Objective (1): when returning back to the tab that has the tweet results, determine why the iframes are empty (after they were initially created by widgets.js and displaying fine).

Objective (2): determine why the call to twttr.widgets.load() is not being recognized even though widgets.js is being loaded.

Another perhaps higher level and easier to answer question (I hope), related to the above: What’s the best way to take the result-set of tweets from a call to the search API, and have those tweets display in the browser as rich tweets that look like the ones that the widget.js generates. Basically, we want to display the media inside of a tweet along with the rest of the tweet contents. If we can do that, perhaps we don’t need to solve all of the above.

Many thanks in advance.


Hi there, I am currently running into the exact same problem… I can’t find anything online regarding this! Have you found a solution?