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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

action跳转页面css和js失效问题解决

当你在某个jsp页面跳转到action执行操作以后,再返回页面发现css和js全部失效,要刷新才能重新加载 问题原因在于action跳转回来以后的目录路径是你的action所配置的目录 如 ...

JQuery Mobile跳转页面后css和js失效

最近使用JQuery Mobile编写手机端页面时遇到一些问题 问题:从一个页面点击一个链接进入到另一个页面时,发现这个页面的css和js都失效,且这两个页面都加载了JQuery Mobile...

jquery mobile js失效原理与解决

jquery mobile 转场JS失效 作者:admin 时间:2013-01-05 标签:JS/jQuery     文章摘要: 最近在使用jQuery mobile时遇到一个很...

jquery mobile ajax页面跳转出现(error load page的错误)及js与css失效的说明和处理

简要说明 jqm的ajax页面跳转,实际上是通过一个ajax请求,将目标页面的  以内的dom结构复制过来 假如有a.html,b.html二个页面,a的源页面,b是目标页面 1.可以知道a页面必然...

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

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

jQuery Mobile-页面跳转

1. a 标签跳转 当我们的网站引用了jquery mobile的js后,点击页面的链接,你会发现页面无法跳转,因为jquery mobile默认是采用ajax方式来加载网站的,如果你需要跳...

jQuery mobile开发之页面(链接)跳转刷新问题

在jQuery mobile中实现页面跳转常用的方法是 跳转 或是跳转        问题描述:        但有时我们会发现,当点击“跳转”后要么是页面没有响应,要么是跳转后的页面...
  • hlj184
  • hlj184
  • 2016-03-24 21:56
  • 1762

ext session失效 页面跳转

jquery mobile使用过程中遇到的一些问题及解决方法

最近在项目在综合考虑了可能维护性和应用本身的复杂性,采用了HTML5 + JQuery Mobile的文案。 记录一下遇到的两个问题。 1)为了在手机上运行的更快,canvas中底图决定调用 putI...

Apache Shiro会话超时,登录页面跳转到父窗体的解决方法

问题1: 在使用Apache Shiro框架做权限验证时,因为我的页面是使用iframe做了一个上左右的分层,上面上log,左侧是菜单,具体的内容则显示在右侧。 当我点击某菜单,此时如果会话超时了...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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