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地址
以上です、ご覧いただいてありがとうございます。