5

我想从我的 .js 文件中打开 .html 文件。所以我使用了 $.mobile.changePage("file.html")。在file.html 中有file.js。但是 file.js 在调用 file.html 时不会调用。

提前致谢。

第一个.js

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

文件.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>

请帮我..

4

2 回答 2

7

当 jQM 通过 AJAX 加载另一个页面时，它只会拉入 div[data-role="page"] 中的任何内容，而没有其他内容，例如头部


因此，如果您愿意，可以在此 div 中包含任何 JS/CSS，问题是如果多次访问此页面，任何 CSS 都会累积，但 JS 的问题要严重得多。

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


对于较小的站点

我通过将所有 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 事件在页面加载时运行，仅运行一次（加载后，如果您导航回它，它会保留在内存中，即使通过后退按钮也不会再次触发），另一方面，pageshow 会在每次页面时触发例如，即使您通过浏览器上的后退按钮导航回它，也会显示。

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



对于较大的站点

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

如果你有外部 js 文件，并且你只需要一次将它放在所有页面的头部（如果没有太多），那么如果你有一个非常大的网站，你可以通过跟踪哪个 JS 来做得更好文件已加载到服务器端。

所有这些都可以通过不使用 AJAX 加载新页面来避免，所以请考虑一下这种过渡/加载效果是否值得


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

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

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

  1. 我用名称引用每个页面：<div data-role="page" data-mypage="employeelist">

  2. 在这个现场活动中，您基本上可以为每个页面“名称”设置一个 switch 语句，然后检查event.type的 pageinit/pageshow 或两者并把您的代码放在那里，然后每次创建/显示页面时都会触发此事件，它知道是哪个页面触发了它，然后调用相应的代码

  3. 最终我的代码太多了，所以我构建了一个处理程序对象，其中每个页面的 js 都包含在一个单独的 js 文件中，并且可以使用实时事件注册处理程序

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

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

于 2012-01-31T18:38:15.123 回答
4

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

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

于 2010-12-22T12:56:51.660 回答