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

最新推荐文章于 2022-05-26 16:17:50 发布

java_mars

最新推荐文章于 2022-05-26 16:17:50 发布

阅读量6.2k

点赞数

本文链接：https://blog.csdn.net/java_mars/article/details/22571961

版权

移动专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简要说明

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

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

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

    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的结构应该是这样的

    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的错误

    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>都不行，结果如下

    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的初始化加载事件

    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>

java_mars

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery mobile ajax页面跳转出现(error load page的错误)及js与css失效的说明和处理

简要说明jqm的ajax页面跳转，实际上是通过一个ajax请求，将目标页面的以内的dom结构复制过来假如有a.html,b.html二个页面，a的源页面，b是目标页面1．可以知道a页面必然加载好jquery mobile的 js和css资源，如下所示 a.html ...
复制链接

扫一扫

专栏目录