Jquerymobile – $ .mobile.changepage

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

提前致谢。

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> 

请帮帮我..

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

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

当jQM通过AJAX加载另外一个页面时,它只会在你的div中引入任何东西[data-role =“page”]而没有别的东西,比如头

所以你可以,如果你想,在这个div中包含任何JS / CSS,问题是如果这个页面被多次访问,任何CSS都会积累,但是这个问题对于JS来说更糟糕。

基本上每一个页面都会附加到DOM上,所以如果使用像$('div.someClass')这样的全局select器,那么JS就会运行在整个DOM上(每个页面加载的),甚至使用ID也不是一个完美的解决scheme,因为如果你可以链接到同一页面两次。

对于较小的站点

我已经通过将所有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事件在页面加载时运行,只有一次(加载之后,如果返回到内存,即使通过后退button,也不会再次触发),页面显示每次页面触发即使您通过浏览器上的后退button导航回来,也是如此。

pageinit在DOM出现的时候运行,pageshow事件只有当你有一些依赖于被渲染的DOM的代码时,你需要通过$ .mobile.activePage快速引用到活动页面,或者你需要改变一些数据每次显示时刷新一次。 对于大多数目的,我只使用pageinit作为document.ready用于jQM,并在那里绑定我的事件。 对静态元素使用bind,而不是对dynamic元素进行实时生效,因为实况事件在文档根目录下侦听,所以您希望在页面div上侦听。

对于较大的站点

对于大型网站来说,将活动事件绑定到任何页面和处理页面types是有优势的,这样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. 在这个实况事件中,你可以基本上为每个页面“name”设置一个switch语句,然后检查pageinit / pageshow或者两者的event.type并把你的代码放在那里,然后每次创build/显示一个页面时,这个事件将被触发它知道哪个页面触发了它,然后调用相应的代码

  3. 我最终有太多的代码,所以我build立了一个处理程序对象,其中每个页面的js都包含在一个单独的js文件中,并且可以向活动事件注册处理程序

缺点是,你的整个网站的所有js加载到用户到达的第一页,但缩小了,即使是一个大的网站比jQuery或jQM小,所以这不应该是一个问题。 优点是每当用户导航到新页面时,您不再通过AJAX加载每个页面的所有JS。

*注意:现在RequireJS可以使这更容易pipe理