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地址

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值