jquerymobile - 包括 .js 和 .html

发布于 2024-10-11 07:49:24 字数 2163 浏览 1 评论 0原文

在我的应用程序中，我使用多个 html 页面来显示内容，并且每个页面都有自己的 .js 文件。当我调用 html 页面时，.js 文件也包含在内。在 .js 中，我使用 $('div').live('pageshow',function(){})。我从 .js 调用 html 文件（使用 $.mobile.changePage("htmlpage"))。

我的问题：考虑一下，我有两个 html 文件。 secondary.html 文件在 one.js 中调用。当我显示 Second.html 时，此时 one.js 再次重新加载。我收到警报“one.js”，然后是“second.js”

one.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script>
  </head> 
  <body>         
    <div data-role="page">
    </div>
  </body>
</html>

Second.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
    <script src="../jquery-1.4.3.min.js"></script>
    <script src="../jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="Scripts/second.js"></script>
  </head> 
  <body>
    <div data-role="page">   
      <div data-role="button" id="link" >Second</div>
    </div><!-- /page -->
  </body>
</html>

one.js

$('div').live('pageshow',function()
{     
   alert("one.js");
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("second.html");                   
});

second .js

$('div').live('pageshow',function(){
{     
   alert('second.js');  
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("third.html");                   
});

注意：当我显示forth.html时，将重新加载以下文件（one.js，second.js，third，js和fourth.js。但我只需要fourth.js）。我尝试使用 $.document.ready(function(){});但当时.js没有调用。

原文

In my application,I am using more than html page for displaying the content and each page have own .js file. When I call the html page then .js file also included. In the .js,I am using $('div').live('pageshow',function(){}). I am calling the html file from the .js(using $.mobile.changePage("htmlpage")).

My problem: consider, I have two html files. second.html file is called with in the one.js. when I show the second.html, that time one.js is reload again. I am getting the alert "one.js" then "second.js"

one.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="jquery.mobile-1.0a2.min.css" />
    <script src="jquery-1.4.3.min.js"></script>
    <script src="jquery.mobile-1.0a2.min.js"></script> 
    <script src="Scripts/one.js"></script>
  </head> 
  <body>         
    <div data-role="page">
    </div>
  </body>
</html>

Second.html

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Sample </title> 
    <link rel="stylesheet" href="../jquery.mobile-1.0a2.min.css" />
    <script src="../jquery-1.4.3.min.js"></script>
    <script src="../jquery.mobile-1.0a2.min.js"></script>
    <script type="text/javascript" src="Scripts/second.js"></script>
  </head> 
  <body>
    <div data-role="page">   
      <div data-role="button" id="link" >Second</div>
    </div><!-- /page -->
  </body>
</html>

one.js

$('div').live('pageshow',function()
{     
   alert("one.js");
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("second.html");                   
});

second.js

$('div').live('pageshow',function(){
{     
   alert('second.js');  
   //AJAX Calling 
   //success result than call the second.html 
   $.mobile.changePage("third.html");                   
});

Note : When I show forth.html that time the following files are reload(one.js,second.js,third,js and fourth.js. But I need fourth.js alone). I tried to use the $.document.ready(function(){}); but that time .js did not call.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜宝宝 2024-10-18 07:49:24

pageshow 事件绑定每次页面加载时触发的 JavaScript 函数。当您加载第二个页面时，您正在创建另一个实际上不需要创建的 pageshow 函数。

当且仅当您定义一次时，这应该有助于解决您的问题：

 $('div').live('pageshow',function(event, ui){
    alert('This page was just hidden: '+ ui.prevPage);
 });

 $('div').live('pagehide',function(event, ui){
    alert('This page was just shown: '+ ui.nextPage);
 });

当您转换页面时，这将提醒您刚刚显示了哪个页面以及刚刚隐藏了哪个页面。

很棒的资源：
http://jquerymobile.com/demos/1.0a2/#docs/api /events.html

http://forum.jquery.com/topic/mobile -事件文档

The pageshow event binds JavaScript functions that fire each time the page loads. When you load the second page, you're creating another pageshow function that you actually don't need to create.

This should help solve your problem, if and only if you define this once:

 $('div').live('pageshow',function(event, ui){
    alert('This page was just hidden: '+ ui.prevPage);
 });

 $('div').live('pagehide',function(event, ui){
    alert('This page was just shown: '+ ui.nextPage);
 });

When you transition pages, this will alert you with what page was just shown, and what page was just hidden.

Great resource:
http://jquerymobile.com/demos/1.0a2/#docs/api/events.html

http://forum.jquery.com/topic/mobile-events-documentation

回复收藏 0 原文

别靠近我心 2024-10-18 07:49:24

根据评论进行编辑（抱歉，这里是新手）：

这是一种基于当前 HTML 页面加载 JS 文件的替代方法

有一个脚本文件，该脚本文件包含在应用程序的每个页面上，但仅充当“引导程序” ' 文件检测当前页面，然后将 JavaScript 文件插入到 DOM 中。

此函数将插入 Javascript：

function insertScript(script, container) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'Assets/Scripts/' + script + '.js';
    container.appendChild(elem);
}

此代码检测当前页面

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed.
// See: https://gist.github.com/1336327 for some other page events
$(document).bind('pagechange', function(event){

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
    var pages = $('div[data-role="page"]'),
    // the current page is always the last div in the Array, so we store it in a variable
    currentPage = pages[pages.length-1],
    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    attr = currentPage.getAttribute('data-url');

// basic conditional checks for the url we're expecting
if (attr.indexOf('home.html') !== -1) {
    // now we know what page we're on we can insert the required scripts.
    // In this case i'm inserting a 'script.js' file.
    // I do this by passing through the name of the file and the 'currentPage' variable
    insertScript('search', currentPage);
}

// rinse and repeat...
if (attr.indexOf('profile.html') !== -1) {
    insertScript('profile', currentPage);
}

});

参考链接

Edited per oers comment (Sorry, SO newbie here):

Here is an alternate approach to loading JS files based on the current HTML page

Have a single script file that is included on every page of your application but acts as nothing more than a ‘bootstrapper’ file which detects the current page and then inserts the JavaScript file(s) into the DOM.

This function will insert the Javascript:

function insertScript(script, container) {
    var elem = document.createElement('script');
    elem.type = 'text/javascript';
    elem.src = 'Assets/Scripts/' + script + '.js';
    container.appendChild(elem);
}

And this code detects the current page

// The 'pagechange' event is triggered after the changePage() request has finished loading the page into the DOM 
// and all page transition animations have completed.
// See: https://gist.github.com/1336327 for some other page events
$(document).bind('pagechange', function(event){

// grab a list of all the divs's found in the page that have the attribute "role" with a value of "page"
    var pages = $('div[data-role="page"]'),
    // the current page is always the last div in the Array, so we store it in a variable
    currentPage = pages[pages.length-1],
    // grab the url of the page the  was loaded from (e.g. what page have we just ajax'ed into view)
    attr = currentPage.getAttribute('data-url');

// basic conditional checks for the url we're expecting
if (attr.indexOf('home.html') !== -1) {
    // now we know what page we're on we can insert the required scripts.
    // In this case i'm inserting a 'script.js' file.
    // I do this by passing through the name of the file and the 'currentPage' variable
    insertScript('search', currentPage);
}

// rinse and repeat...
if (attr.indexOf('profile.html') !== -1) {
    insertScript('profile', currentPage);
}

});

Reference Link

回复收藏 0 原文

~没有更多了~