1. 程式人生 > >jQuery Mobile頁面跳轉導致css失效原因及解決方法

jQuery Mobile頁面跳轉導致css失效原因及解決方法

JQM頁面跳轉的時候預設是ajax方式的,也就是說,只有第一次請求頁面,$(document).ready();才會觸發,而不是每一次跳轉都會觸發ready事件。 
這就導致由a畫面跳轉到b畫面的時候,瀏覽器只會只會把b.html中<page>內的內容載入進dom,而<page>外的程式碼都不會載入,所以導致在<page>外的js和css都失效了。

官方文件如下:Jquery Mobile支援所有標準的html格式,為了讓體驗更加流暢,Jquery Mobile會把同一個域下的所有指向頁面的連結都會自動轉為ajax請求,並且用動畫的轉場效果實現切換指向別的域的連結或者是含有 rel="external", data-ajax="false" 屬性的連結以及含有target屬性的連結不會通過ajax載入,頁面會整體被重新整理。

如果只是載入<page>標籤中的內容的話,那麼<head>部分定義的<script>...</script>以及<style type="text/css"></style>部分的內容都不會被瀏覽器載入進去,這就是為啥css和js都失效的原因。

下面提供幾種解決辦法: 
①將b頁面需要用到的css以及js放在<page>div內(不推薦使用這種辦法,因為寫出來的程式碼變得好奇怪,似乎不符合編碼規範)。

②使用a標籤進行頁面跳轉的時候,a標籤中新增data-ajax=”false”或者rel=”external”來防止ajax提交。(eg: <a href="b.htm" rel="external" >)。

正確的寫法:<a href="second.html" data-role="button" id="submit" data-ajax="false" >登入</a>

③既然這是由於JQM的ajax跳轉方式導致的問題,那咱們不用它不就行了嘛
預設ajax: $.mobile.changePage(to,[options])方法。 
基本的.location.href來實現頁面跳轉。

順便提一下*.location.href 用法:
  top.location.href=”url” 在頂層頁面開啟url(跳出框架) 
  self.location.href=”url” 僅在本頁面開啟url地址 
  parent.location.href=”url”   在父視窗開啟Url地址