关闭

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

标签: css失效ajaxjquery-mobile
660人阅读 评论(0) 收藏 举报
分类:

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

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

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8115次
    • 积分:215
    • 等级:
    • 排名:千里之外
    • 原创:14篇
    • 转载:0篇
    • 译文:0篇
    • 评论:1条
    文章分类