Question

我想从.js文件中打开.html文件。所以我使用了$ .mobile.changePage（“file.html”）。在file.html中有file.js.但是当调用file.html时，file.js不会调用。

提前谢谢。

first.js

 $.mobile.changePage ("file.html");

file.html

<!DOCTYPE html> 
<html> 
 <head>
 <meta charset="utf-8" /> 
 <title>jQuery Mobile Framework - Dialog Example</title> 
 <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
 <script src="jquery-1.4.4.min.js"></script>
   <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="../Scripts/file.js"/> // Could not imported
    <script src="../Scripts/helperArrays.js"/> // Could not imported
    <script src="../Scripts/globalVariables.js"/> // Could not imported
</head> 
<body> 

<div data-role="page">

  <div data-role="header" data-nobackbtn="true">
   <h1>Vaults</h1>
  </div>

 <!-- <div data-role="content" data-theme="c" id="contentVault">

   <a href="Views/searchPage.html" data-role="button" data-theme="b">Sample Vault</a>       
   <a href="Views/searchPage.html" data-role="button" data-theme="c">My Vault</a>    
  </div> -->

        <div data-role="content" id="content">  
        <ul id="listview" data-role="listview" data-inset="true" data-theme="e" data-dividertheme="b">            
          <li id="listdiv" data-role="list-divider">List of Items</li>
        </ul>    
      </div><!-- /content -->

 </div>


</body>
</html>

请帮帮我..

Answer 1

当jQM通过AJAX加载另一个页面时，它只会拉入div [data-role =“page”]中的任何内容，而不是其他内容，例如head

所以你可以，如果你想在这个div中包含任何JS / CSS，问题是如果多次访问这个页面，任何CSS都会累积，但是JS的问题要糟糕得多。

您基本上将每个页面都附加到DOM，因此如果您使用像$（'div.someClass'）这样的全局选择器，则JS会在整个DOM（您加载的每个页面）上运行，即使使用ID isn'这是一个完美的解决方案，因为如果你可以两次链接到同一页面。

适用于较小的网站

我已经通过将所有CSS移动到一个文件中解决了这个问题，并且每次加载页面时我想运行的JS代码，我绑定到pageinit和pageshow jQM事件：

<script type="text/javascript">         
$("div:jqmData(role='page'):last").bind('pageinit', function(){
          //your code here - $.mobile.activePage not declared
    });

    $("div:jqmData(role='page'):last").bind('pageshow', function(){
          //your code here - $.mobile.activePage works now
    });
</script>

pageinit事件在页面加载时运行，只运行一次（在加载后它会保留在内存中，如果你导航回来，甚至通过后退按钮，这不再被触发），另一方面，页面显示会触发每次显示页面时，即使您通过浏览器上的后退按钮导航回页面，例如。

当DOM存在时，pageinit会运行，只有当你有一些代码依赖于正在呈现的DOM而且你需要通过$ .mobile.activePage快速引用活动页面或者某些数据发生更改时，才会运行pageshow事件。每次显示时都需要刷新它。在大多数情况下，我只使用pageinit作为jQM的document.ready并在那里绑定我的事件。对于静态元素使用bind，对动态元素使用on而不是live，因为实时事件在文档根处侦听，你想在页面div处听。

适用于大型网站

对于较大的站点，将实时事件绑定到任何页面并处理页面类型是有好处的，这样js代码不会被多次加载。

如果您有外部js文件，其中包含帮助函数，您只需将其放在所有页面的头部（如果没有太多），如果您有一个非常大的网站，您可能会做得更好跟踪哪些JS文件已经加载到服务器端。

所有这一切都可以通过不使用AJAX加载新页面来避免，因此请考虑转换/加载效果是否值得

* 以下是我处理大型jQM网站的方法：*

将实时事件绑定到所有页面/对话框pageinit和pageshow事件：

$(document).on('pageinit pageshow', 'div:jqmData(role="page"), div:jqmData(role="dialog")', function(event){

我使用名称<div data-role="page" data-mypage="employeelist">
在这个直播活动中，您基本上可以为每个页面“名称”设置一个switch语句，然后检查 event.type 以获取pageinit / pageshow或两者并将您的代码放在那里，然后每次创建/显示页面时都会触发此事件，它会知道触发它的页面然后调用相应的代码
我最终有太多的代码，所以我构建了一个处理程序对象，其中每个页面的js都包含在一个单独的js文件中，并且可以使用live事件注册处理程序

缺点是整个站点的所有j都加载到用户到达的第一页，但即使是大型站点也小于jQuery或jQM，所以这不应该是一个问题。优点是每次用户导航到新页面时，您不再通过AJAX为每个页面加载所有JS。

*注意：现在RequireJS可以使这个更易于管理

Answer 2

Jquery mobile通过AJAX获取页面并将其内容添加到当前页面。我看到了一些关于将页面标题更改为传入页面标题的注意事项，因此它们（计划？）访问头部，但目前jquery mobile在加载页面时似乎没有加载外部js。

更重要的是 - 如果你使用$（document）.ready（）它将不会被触发，因为它是AJAX

Jquerymobile - $ .mobile.changepage

2 个答案: