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

125 阅读 0 评论 83 点赞

我是靠谱客的博主忐忑书包，这篇文章主要介绍jquery mobile ajax页面跳转出现(error load page的错误)及js与css失效的说明和处理，现在分享给大家，希望可以做个参考。

简要说明

jqm的ajax页面跳转，实际上是通过一个ajax请求，将目标页面的 <div data-role="page" > </div>以内的dom结构复制过来

假如有a.html,b.html二个页面，a的源页面，b是目标页面

1．可以知道a页面必然加载好jquery mobile的 js和css资源，如下所示

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13

a.html
<head>
<meta >
<link rel="stylesheet" href="jqm.1.4.2/jquery.mobile-1.4.2.min.css" />
<script type="text/javascript" src="jqm.1.4.2/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jqm.1.4.2/jquery.mobile-1.4.2.min.js"></script>
...
</head>
<body>
...
</body>

这个是a页面的．

2．如果b.html做为目标页面，则不需要加载jquery mobile的js和css资源，跳转并没有实际发生，还是在a.html，只不过把b.html的dom复制到了a.html，因此b.html的结构应该是这样的

复制代码

1
2
3
4
5
6
7
8
9

b.html
<head>
<meta>
...不需要jquery mobile的库
</head>
<body>
<!--b.html的dom-->
</body>

3．前面我们知道它只会加载b.html的 <div data-role="page"></div>以内的dom，因此，b.html的结构必然是这样，不然会出现 error load page的错误

复制代码

1
2
3
4
5
6
7
8
9
10
11
12

b.html
<head>
<meta >
...不需要jquery mobile的库
</head>
<body>
<div data-role="page">
<!--b.html的dom，这里放置要加载的内容-->
</div>
 
</body>

4．本以为做好以上几点就可以了，经过测试，发现b.html页面在加载过去后(按以上做法，可以加载)，但又发现b.html内自定义的css，加写的js脚本，全部通通无用，经过一番折腾，终于知道为什么了．可想而知，因为只会加载 <div data-role="page"></div>以内的dom， 因此，我们要把自定义的css，加写的js脚本，也要放在这里边．而且要放在<div data-role="content" ></div>区域内，放在<div data-role="header" ></div>及<div data-role="footer" ></div>都不行，结果如下

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

b.html
<head>
<meta >
...不需要jquery mobile的库
</head>
<body>
<div data-role="page">
<div  data-role="header" > <!--这里不能放js及css，经测试无效--></div>
 
<div
data-role="content">
<!--b.html的自定义js,css放在这里，最好是本区域的第一行-->
<!--b.html的dom，这里放置要加载的内容-->
 </div>
<div  data-role="footer" > <!--这里不能放js及css，经测试无效--></div>
</div>  
</body>

5．在做好以上几步之后，从a.html加载b.html的工作基本完成了，js和css也可以生效．最后给出完整的b.html写法，在这里再加一个b.html的初始化加载事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

b.html
<head>
<meta >
...不需要jquery mobile的库
</head>
<body>
<div data-role="page">
<div  data-role="header" > <!--这里不能放js及css，经测试无效--></div>
 
<div
data-role="content">
<!--b.html的自定义js,css放在这里，最好是本区域的第一行-->
<style>
</style>
<script>
   
$(document).on('pageinit',function(){
                $('#txt1').val('456');
            });
</script>
<!--b.html的dom，这里放置要加载的内容-->
<input id="txt1" name="txt1"> 
 </div>
<div  data-role="footer" > <!--这里不能放js及css，经测试无效--></div>
</div>  
</body>