jQuery Mobile页面跳转后未加载外部JS原因分析及解决

来源：互联网发布：网站用linux还是win 编辑：程序博客网时间：2024/06/15 18:41

在使用jQuery Mobile进行Web开发中，当页面跳转时（pageA => pageB），pageB上面的JS事件都没有起到作用，在pageB中引用的JS并未成功运行。因为，JQM并为将整个页面加载到当前的dom中，仅将data-role="page"元素加入当前的dom中。

因此，在<head>中引入的外部JS文件，以及<page>标签外的JS均不能正常运行，刷新页面后方可加载成功。

鉴于JQM这个特性不太可能主动更改，可以用两种方法来解决：
一是在index页面中，注册所有需要使用到的外部JS文件，或者使用母版页面来统一；
二是将页面内部JS写在data-role="page"标签下，这样无论页面怎样跳转，均可以运行。

例子：A网页转跳到B网页,自动弹出正在加载的事件

A网页

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pageone">  <div data-role="header">    <h1>页眉文本</h1>  </div>  <div data-role="main" class="ui-content">     <p>页面一</p>    <a href="04.php">转到页面二</a>  </div>  <div data-role="footer">    <h1>页脚文本</h1>  </div></div>  </body></html>

B网页

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"><script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script></head><body><div data-role="page" id="pagetwo"> <script>       // setTimeout('showLoader()', 100);//这里要延迟一下，直接调用无法显示加载器      //显示加载器.for jQuery Mobile 1.2.0            function showLoader() {            $.mobile.loading('show', {                text: '正在保存中...', //加载器中显示的文字                  textVisible: true, //是否显示文字                  theme: 'a',        //加载器主题样式a-e                  textonly: false,   //是否只显示文字                  html: ""           //要显示的html内容，如图片等              });        }//隐藏加载器.for jQuery Mobile 1.2.0  function hideLoader() {$.mobile.loading('hide');}</script><script>    $(document).on("pageshow",function(){      showLoader();//自动弹出加载中的层});    </script>    <div data-role="header">    <h1>页眉文本</h1>  </div>  <div data-role="main" class="ui-content">  <!--这里是PHP中弹出-->  <?php echo "<script>$(document).on('pageshow',function(){showLoader();});</script>"?>    <p>页面二</p>  </div>  <div data-role="footer">    <h1>页脚文本</h1>  </div></div> </body></html>

0 0