带有 Twitter API 的 jQuery 移动端

Question

我正在升级一个 jquery 移动应用程序以使用 twitter api v1.1。该应用程序在各种不同的页面中嵌入了时间线，由于 twitter 的变化，这些时间线不再起作用。

我使用了 twitter 创建小部件功能，该功能会生成与此类似的代码；

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

我已将此代码嵌入到我的页面中，并且在第一次显示页面时一切正常。但是，在后续页面或返回同一页面时，嵌入时间线不会出现，除非我刷新浏览器强制重新加载页面。

我怀疑问题与 jqm 使用 ajax 进行页面加载的方式有关。 twitter javascript 必须与文档就绪事件挂钩，但在第一个页面加载后永远不会调用它，因为所有后续页面都是通过 ajax 加载的。

我尝试将 twitter 提供的 javascript 插入到 pageinit 事件中，但没有成功。例如

$(document).on("pageinit", function( event ) {
   // Inserted twitter js here      
});

关于如何让 twitter 嵌入式时间线可靠地出现在 jquery 移动应用程序中（不使用服务器代码）的任何想法？

Answer 1

我最终想通了。用于网站的 twitter api 添加了一个 window.twttr 对象，该对象有一个 load 方法，它将扫描 dom 并安装小部件。这意味着我们可以轻松地检查 widget.js 是否已加载，如果加载，则调用它，如果不加载。最终代码看起来像这样；

$(document).bind('pageinit', function() {
    if (window.twttr) {
        twttr.widgets.load();
    } else {
        // Insert twitter supplied widget js here
    }
});

Answer 2

我有一个 twitter 嵌入通过绑定到“pagecreate”事件来工作。 像这样：

// #twitter is my page that I have the embed in
$( '#twitter' ).live( 'pagecreate',function(event){
    //twitter js here
});