2013-08-01 2 views
0

twitter api v1.1에서 작동하도록 jquery 모바일 앱을 업그레이드 중입니다. 이 앱은 트위터 변경으로 더 이상 작동하지 않는 다양한 페이지에 타임 라인을 삽입했습니다.Twitter API가있는 jQuery 모바일

나는 위와 비슷한 코드를 생성하는 트위터 생성 위젯 기능을 사용했습니다.

<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를 pageinit 이벤트에 성공적으로 삽입하는 것을 시도했다. 예를

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

트위터 포함 된 타임 라인이 안정적으로 JQuery와 모바일 앱에서 표시하는 방법에 어떤 아이디어를 위해 (서버 코드를 사용하지 않고)?

답변

0

나는 'pagecreate'이벤트에 바인딩하여 트위터 임베디드 작업을했습니다. 과 같이 :

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

답장을 보내 주셔서 감사합니다. 그러나 이것은 저에게 적합하지 않습니다. pagecreate 이벤트는 처음 페이지가로드 될 때 호출되었지만 후속 디스플레이에서는 그렇지 않습니다. – bludginozzie

1

나는 이것을 알아내는 끝났다. 웹 사이트 api에 대한 트위터는 window.twttr 객체를 추가하며이 객체는 DOM을 검사하고 위젯을 설치할 load 메소드를 가지고 있습니다. 이것은 우리가 widget.js가로드되었는지 쉽게 확인할 수 있다는 것을 의미합니다. 최종 코드는 다음과 유사합니다.

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