jQuery Mobile页面跳转导致css、js失效原因及解决方法

原创 2015年07月10日 14:01:18

Created by Yiyi_coding
Last edited at 2015年7月10日


昨天做项目画面的mock up 的时候,自己做好的画面在浏览器端显示很正常,但是和别人做的画面整合到一起,存在页面跳转的时候,就产生了很奇怪的现象:css完全失效了!!!
后来查了一些资料,发现了其中的奥秘。
因为是做mock up所以css全部定义在head> <style type="text/css">……..</style> </head>中,JQM页面跳转的时候默认是ajax方式的,也就是说,只有第一次请求页面,$(document).ready();才会触发,而不是每一次跳转都会触发ready事件。
这就导致由a画面跳转到b画面的时候,浏览器只会只会把b.html中<page>内的内容加载进dom,而<page>外的代码都不会加载,所以导致在<page>外的js和css都失效了。
举个栗子:一般的.html文件结构如下:

<!DOCTYPE html>
<html>
<head>
<meta>...</meta>
<link>...</link>
<script>...</script>
<style type="text/css">
......
</style>
</head>
<body>
<div id="#####" data-role="page">
........
</div>
</body>
</html>

按照上文说的,如果只是加载<page>标签中的内容的话,那么<head>部分定义的<script>...</script>以及<style type="text/css"></style>部分的内容都不会被浏览器加载进去,这就是为啥css和js都失效的原因。

下面提供几种解决办法:
将b页面需要用到的css以及js放在<page>div内。(不推荐使用这种办法,因为写出来的代码变得好奇怪,似乎不符合编码规范。。。)

使用a标签进行页面跳转的时候,a标签中添加rel=”external”或者data-ajax=”false”来防止ajax提交。(eg: <a href="b.htm" rel="external" >

既然这是由于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地址

以上です、ご覧いただいてありがとうございます。

js页面跳转无效

或者window.open 无效, setTimeout(function(){ window.location.href=""...
  • yutuna
  • yutuna
  • 2015年05月25日 20:38
  • 158

jquery mobile js代码失效解决办法

jQuery Mobile工作原理: 为了实现在移动设备上的无缝客户体验,jQuery Mobile默认采用AJAX的方式载入一个目的链接页面。因此,当在浏览器中点击一个链接打一个新的页面时,jQu...
  • xian00000
  • xian00000
  • 2013年11月25日 13:11
  • 968

jquery.mobile.changePage() 页面参数介绍

jQuery.mobile.changePage( to [, options ] ) 从一个页面跳转到另一个页面,使用$.mobile对象的changePage方法来实现。但要使用此方式的时候,要...
  • u013406800
  • u013406800
  • 2014年08月22日 10:37
  • 704

mobile.changePage切换页面后的事件处理

今天分析试了一下,有两个页面index.html和main_wdsp.html 发现在index.html中通过 $.mobile.changePage("main_wdsp.html?useri...
  • danielinbiti
  • danielinbiti
  • 2014年01月14日 16:46
  • 6151

jquery mobile js失效原理与解决

jquery mobile 转场JS失效 作者:admin 时间:2013-01-05 标签:JS/jQuery     文章摘要: 最近在使用jQuery mobile时遇到一个很...
  • zhongyangjian
  • zhongyangjian
  • 2014年03月13日 11:37
  • 1481

jquery mobile的两种页面跳转方式

jquery mobile的两种页面跳转方式 所有html都放在一个index.html中 多个html页面相互切换 jqm页面切换机制mechanism...
  • u013905744
  • u013905744
  • 2017年08月10日 14:42
  • 1508

jquery mobile changepage 传参问题

本来觉得changePage 那么多option,传几个参数应该没问题 结果翻遍国内外网站,基本方法只有三种 1,显性传参,就是利用url这个地址把参数带上,然后到changepa...
  • aiyuai1987
  • aiyuai1987
  • 2013年09月13日 15:30
  • 471

jQuery Mobile中jQuery.mobile.changePage方法使用详解

jQuery.mobile.changePage方法用的还是很多的。作为一个老手,有必要对jQuery mobile中实用方法做一些总结。系列文章请看jQuery Mobile专栏。jquery.mo...
  • xmt1139057136
  • xmt1139057136
  • 2015年04月02日 13:14
  • 5795

jQuery Mobile页面跳转切换的几种方式

jQuery Mobile在移动开发中越来越受到欢迎。而他的各个版本也在持续不断的更新中。同样的我也很喜欢它,它加快了我们开发HTML5的速度。 同时又具备jQuery一样的操作方法。学起来也是相当的...
  • xmt1139057136
  • xmt1139057136
  • 2014年06月12日 19:08
  • 8629

如何解决Avtion或者Handle转发后的页面css和js失效问题

问题:          1.地址栏访问页面index.jsp,css样式显示,js加载;                        2.页面提交后,经过Handel处理后,转发到index.js...
  • qq_30941091
  • qq_30941091
  • 2017年01月11日 17:11
  • 378
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery Mobile页面跳转导致css、js失效原因及解决方法
举报原因:
原因补充:

(最多只允许输入30个字)