jQuery Mobile页面跳转后未加载外部JS原因分析及解决_项目跟项目之间跳转时main.js第2次未加载-CSDN博客

本文链接：https://blog.csdn.net/haibo0668/article/details/53888417

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

在使用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>