Question

我有两个页面（index.html和second.html）使用JQM和Phonegap构建，我想知道为什么必须在index.html上定义所有js函数，尽管我想在second.html上使用它，

我的脚本如下（second.html）：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loan Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="css/themes/default/jquery.mobile.theme-1.2.0.css" />
<link rel="stylesheet" href="css/themes/default/override.css" />

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.1.0.js"></script>

<script type="text/javascript" charset="utf-8">
    function test(){alert("hello agent!");}
</script>
</head>

<body>

<div data-role="page" id="agents">

<div data-role="header" data-position="fixed">
    <div class="ui-title">Agents</div>
</div>

<div data-role="content">
    <a href="#" onclick="test();">test</a>
</div>

<div data-role="footer" data-position="fixed">
    <p></p>
</div>

</div>
</body>
</html>

在Eclipse中，当我尝试单击以触发该功能时，它显示消息如：

file:///android_asset/www/index.html: Line 1 : Uncaught ReferenceError: test is not defined

绝对无法在second.html页面上找到该功能。

除非我把它放在index.html中，否则js函数test（）不起作用。

我不希望我的所有移动页面都在一页中加载。

您的建议非常感谢，谢谢。

Answer 1

当您浏览使用jQuery Mobile的移动网站时，其中包含的所有脚本 head元素将仅在您开始的页面上读取。
因此，您从index.html开始页面，然后将运行该页面的head元素中的脚本。
如果您使用一个按钮或导航栏移动到另一个页面，head元素中的脚本这些页面将被忽略，因为只有title元素和div元素包含data-role="page"属性将被解析并带入DOM。发生这种情况的原因是使用jqm引入页面的Ajax内置行为。

Answer 2

如果你想为PhoneGap构建好的应用程序（以及那些有可能在AppStore中被接受的应用程序），你需要避免使用多个页面，这只会让你头疼。查看一个很好的JS模板解决方案，例如handlebars.js http://handlebarsjs.com/，并查看cconraets优秀的phonegap教程http://coenraets.org/blog/phonegap-tutorial/

在应用程序中重新加载页面实际上会破坏整个目的，而JQuery Mobile是一个野兽，而且对于表现不佳的移动设备来说几乎都很好。

Answer 3

问这个问题已经有一段时间了。但是，我有一个答案。在second.html中放置<script src="Paging.js"></script>，其中Paging.js将是您编写函数的文件（可以在onClick事件中调用），它将设置window.location.href =“http：\ ... \ index。 html“并将您重定向到index.html。但请注意，它不是jQuery Mobile AJAX调用，它将再次刷新页面（从index.html下载js文件，设置元素......）。

Paging.js示例：

function GotoIndex()
{
  window.location.href = "http:\\...\index.html";
}

second.html示例： ...

<a href="#" id="lnkSubmitChanges" onclick="GotoIndex()">Submit</a>

...

如果您问自己，但是如何获取/设置window.location.href的变量，您可以在index.html中使用localStorage.setItem（'PreviousURL'，window.location.href）并将其读作localStorage second.html中的.getItem（'PreviousURL'）。然后Paging.js将是：

function GotoIndex()
{
  window.location.href = localStorage.getItem('PreviousURL');
}

Jquery mobile + Phonegap + Eclipse，不能为索引页以外的内页调用javascript函数

3 个答案: