Twitter API v1.1 で動作するように jquery モバイル アプリをアップグレードしています。このアプリには、Twitter の変更により機能しなくなったさまざまなページにタイムラインが埋め込まれています。
これに似たコードを生成する twitter create widget 機能を使用しました。
<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 モバイル アプリ内に (サーバー コードを使用せずに) 確実に表示する方法についてのアイデアはありますか?