Question

我目前正在使用cordova中的应用程序。由于我有更多页面，我尝试添加菜单。在第一页（index.html）上有一些输出，在第二个文件（settings.html）上我想对外部服务器发出Ajax-Request。

在<head> - 标签中包含所有样式表和jQuery和Cordova。在<body> - Tag中进行了一些Ajax调用。

<head>

<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/start/jquery-ui.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
<script type="text/javascript" src="cordova.js"></script>
</head>

<body onload="onLoad();">    
<div data-role="controlgroup" data-corners="false">
  <a href="index.html">Home</a>
  <a href="settings.html">Settings</a>
</div>
<!-- Ajax Requests -->
</body>

如果我点击设置，我会进入html页面并显示代码，但代码jQuery / js-code将不会被执行。（我尝试了警报，但它没有工作）

你能告诉我有什么可能包括另一个有js-code工作的页面吗？

谢谢！

Answer 1

如果您使用的是jQuery Mobile ，则可以对SPA中的多个页面使用单页应用（Cordova）。

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>   
 </head>
<body> 
    <div data-role="page" id="index">
        <div data-role="header">
            <h1>Home</h1>            
        </div>
        <div data-role="content" class="ui-content" >
            <p>Home Page</p>
            <a data-role="none" href="#setting">Setting</a>
        </div>
    </div>
    <div data-role="page" id="setting">
        <div data-role="header">
            <h1>Setting</h1>
            <a href=""  data-rel="back" >Back</a>
        </div>
        <div data-role="content" class="ui-content" >
            <p>Setting Page</p>
        </div>
    </div>
</body>
<script>
 $(document).on("pagebeforeshow","#index",function(){
   // You ajax call for index page
 });

 $(document).on("pagebeforeshow","#setting",function(){
   // You ajax call for setting page
 });
</script>
<html>

Demo

Answer 2

您需要包含一个在页面完全加载到DOM时将触发的脚本。

 <script>
      $(document).ready(function(){
          -- call your$.ajax({}) here --
      });
 </script>

OR

 <script>
  (function(){
     call your $.ajax({}) here --
   }();
 </script>

Phonegap多页

2 个答案: