JqueryMobile鏈接一個頁面,而鏈接頁面中圖片需刷新才顯示的問題

最近在做一個項目,由於涉及到跨平臺性,所以採用了jquerymobile這個框架,在開發過程中,一開始爲了圖測試方便,採用了chrome瀏覽器來測試運行。現敘述如下問題:

當在first.html中,有個鏈接如:<a href="second.html" data-role="button" id="submit">登錄</a>

    而在second.html中,譬如我引用了highcharts這個jquery圖表插件,會在second.html頁面中生成一些圖表。

    可是這種情況,當我用chrome瀏覽器點擊“登錄”按鈕時,鏈接到second頁面,可是second頁面的圖表不會顯示,需要刷新一下才能顯示圖表,於是我結合了phonegap,把此項目布到android手機中進行測試,也是如此。我很是鬱悶,我後來換了360瀏覽器進行測試,雖然不支持jquerymobile框架主題樣式顯示,不過它鏈接過去能一下子出現圖表的,而不需要刷新。對此,我就開始懷疑是否是瀏覽器鏈接加載頁面的方式不一樣的問題了。

反正中間耗費了很多時間去定位問題的所在。也是由於剛接觸此類技術,並不是很精。後來想想還是追本還原,回到最起點,把jquerymobile的鏈接看了一下,有這麼一段話:

    Jquery Mobile支持所有標準的html格式,爲了讓體驗更加流暢,Jquery Mobile會把同一個域下的所有指向頁面的鏈接都會自動轉爲ajax請求,並且用動畫的轉場效果實現切換
指向別的域的鏈接或者是含有 rel="external", data-ajax="false" 屬性的鏈接以及含有target屬性的鏈接不會通過ajax加載,頁面會整體被刷新。
對此,我就考慮到了,是否是因爲chrome爲了提高頁面的加載速度,採用了ajax加載,頁面不會整體被刷新。於是我就在button按鈕上加上了data-ajax="false",然後果然行了。
正確的方式如下:<a href="second.html" data-role="button" id="submit" data-ajax="false" >登錄</a>

發佈了94 篇原創文章 · 獲贊 12 · 訪問量 65萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章