私はjQuery Mobileウェブサイトを開発しています。私はMulti-Page構造を使用しています。つまり、すべてのページが 1つのhtml ファイルに含まれています。
JavaScript を正しくロードする際に重大な問題があります。何が/なぜ起こっているのか理解できないので、文字通り私を夢中にさせます。
2 つの異なるページにつながる 2 つの水平ボタンがあるナビゲーション バーがあるページがあります。両方のページが をロードし、facebook javascript API2 つの異なる Facebook ページから動的に写真を表示します。
私の質問:
私が持っているすべての異なるページのfacebook APIを呼び出すjavascriptファイルはどこに置くべきですか??
HTMLページの先頭にjavascriptを配置すると、何も読み込まれません。
content divすべてのページの最後で JavaScript を呼び出そうとします。
次のようになります。
$('#xxx').on("pageshow", function() { ... }
私が持っている最初のページでは、javascript が問題なく読み込まれ、写真が表示されます。
ただし、navbar を介してそこに移動するときの 2 つ目は、javascript をロードしません。この特定のページで更新を押した場合にのみロードされます。
だから私が求めているのはwhere、ページがロードされるたびhowに実行されるようにJavaScriptを配置することですか?
私のコードは次のようになります。
<div data-role="page" id="photosNJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
<a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
<div data-role="navbar">
<ul>
<li><a href="#photosNJ" class="ui-btn-active ui-state-persist">Photos Noche Joven</a></li>
<li><a href="#photosEJ">Photos Espacio Joven</a></li>
<li><a href="#videos">Videos</a></li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
<script type='text/javascript' src='javascript/createFbAlbums.js'></script>
</div> <!-- /content -->
<!-- <div id="fb-root"></div> -->
</div>
<div data-role="page" id="photosEJ" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
<a href="#" data-icon="back" data-rel="back" title="Go back">Back</a>
<div data-role="navbar">
<ul>
<li><a href="#photosNJ">Photos Noche Joven</a></li>
<li><a href="#photosEJ" class="ui-btn-active ui-state-persist">Photos Espacio Joven</a></li>
<li><a href="#videos">Videos</a></li>
</ul>
</div> <!-- /navbar -->
</div> <!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums2">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums2">More Albums...</button>
<script type='text/javascript' src='javascript/createFbAlbums2.js'></script>
</div> <!-- /content -->
<!-- <div id="fb-root"></div> -->
</div>
JavaScript ファイルはすべて次のように始まります。
$('#xxx').on("pageshow", function() { ... }