1

我用 JQM 和 Phonegap 构建了两个页面（index.html 和 second.html），我想知道为什么所有 js 函数都必须在 index.html 上定义，尽管我想在 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() 不起作用。

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

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

4

3 回答 3

0

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

于 2012-12-02T14:17:27.370 回答
0

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

在应用程序中重新加载页面确实违背了整个目的，而 JQuery Mobile 是一头野兽，而且对于性能不佳的移动设备来说几乎是好事。

于 2013-12-23T14:09:00.267 回答
0

问这个问题已经有一段时间了。但是，我有一个答案。在 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.getItem( 'PreviousURL') 在 second.html 中。那么 Paging.js 将是：

function GotoIndex()
{
  window.location.href = localStorage.getItem('PreviousURL');
}
于 2015-10-25T04:39:02.107 回答