26

我使用 $.mobile.changepage 在我的 phonegap+jquerymobile 项目中进行重定向。然而让我感到困惑的是，我需要将所有页面的脚本放到同一个文件 index.html 中。如果不是，则重定向页面无法执行其标头中的功能。

例如，我的 index.html 似乎是 $(document).bind("deviceready",function(){$.mobile.changepage("test.html");})

然后，我的设备将重定向到 test.html 这似乎是

$("#btnTest").click(function(){alert("123");})
<button id="btnTest">Test</button>

但是，该脚本永远不会在 test.html 中执行。然后我把脚本放到index.html中，我期望的就完成了。无论如何，如果我将所有脚本放在同一个页面上，项目将变得越来越难以保存。感谢您的帮助。

4

3 回答 3

60

介绍

这篇文章也可以在这里找到，作为我博客的一部分。

jQuery Mobile 如何处理页面更改

要了解这种情况，您需要了解 jQuery Mobile 的工作原理。它使用 ajax 来加载其他页面。

第一页正常加载。它的HEAD和BODY被加载到 中DOM，它们在那里等待其他内容。加载第二页时，仅将其BODY内容加载到DOM. 更准确地说，甚至BODY没有满载。只有第一个具有 data-role="page" 属性的 div 将被加载，其他所有内容都将被丢弃。即使您有更多页面，也BODY只会加载第一个页面。此规则仅适用于后续页面，如果您在初始HTML中有更多页面，所有这些页面都将被加载。

这就是为什么您的按钮显示成功但单击事件不起作用的原因。HEAD在页面转换期间忽略其父级的相同单击事件。

这是官方文档：http: //jquerymobile.com/demos/1.2.0/docs/pages/page-links.html

不幸的是，您不会在他们的文档中找到此描述。以太他们认为这是一个常识，或者他们忘记像我的其他主题一样描述这个。（jQuery Mobile 文档很大，但缺少很多东西）。

解决方案 1

在您的第二页和其他所有页面中，将您的SCRIPT标签移动到BODY内容中，如下所示：

<body>
    <div data-role="page">
        // And rest of your HTML content
        <script>
            // Your javascript will go here
        </script>
    </div>
</body>

这是一个快速的解决方案，但仍然是一个丑陋的解决方案。

工作示例可以在我的其他答案中找到：Pageshow not trigger after changepage

另一个工作示例：页面加载方式与 jQuery-mobile 转换不同

解决方案 2

将您的所有 javascript 移动到原始的第一个 HTML 中。收集所有内容并将其放入单个 js 文件中，放入HEAD. 在加载 jQuery Mobile 后初始化它。

<head>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Put your code into a new file
</head>

最后，我将描述为什么这是一个好的解决方案的一部分。

解决方案 3

在您的按钮和用于更改页面的每个元素中使用rel="external" 。因为它不会使用 ajax 来加载页面，并且您的 jQuery Mobile 应用程序将表现得像一个普通的 Web 应用程序。不幸的是，在您的情况下，这不是一个好的解决方案。Phonegap 永远不能作为普通的网络应用程序运行。

<a href="#second" class="ui-btn-right" rel="external">Next</a>

官方文档，找一章：Linking without Ajax

现实的解决方案

现实的解决方案将使用解决方案 2。但与解决方案 2 不同，我将使用相同的 index.js 文件并在HEAD每个可能的其他页面中对其进行初始化。

现在你可以问我为什么？

Phonegap就像 jQuery Mobile 有问题一样，如果您的每个 js 内容都在一个 HTML 文件中，迟早会出现错误并且您的应用程序将失败（包括加载的 DOM）。DOM 可能会被删除，并Phonegap会刷新您当前的页面。如果该页面没有javascript，则在重新启动之前它将无法工作。

最后的话

这个问题可以通过良好的页面架构轻松解决。如果有人感兴趣，我已经写了一篇关于优秀 jQuery Mobile 页面架构的文章。简而言之，我正在讨论 jQuery Mobile 如何工作的知识是您在成功创建第一个应用程序之前需要了解的最重要的事情。

于 2013-04-04T09:10:16.560 回答
1

与普通的普通 HTML 页面不同，jQuery Mobile 在页面之间导航时使用了 ajax 技术。因此，请确保在所有 html 页面中导入所有 JS 文件和库。

如果您仔细观察，您会发现在加载第二页时会考虑上一页中的 JS 文件。但是如果你强制rrefresh当前页面，那么当前页面的js文件就会生效。

所以正如我之前所说，确保在所有 html 文件中导入 js 文件。

也无需调用deviceready，使用以下语法调用页面特定的 js 函数

$(document).on('pageshow', '#YourPageID', function(){
    // Your code goes here
});
于 2013-04-04T06:03:22.463 回答
1

Jquery Mobile 使用 ajax 加载“页面”。这里的“页面”是一个带有 data-role=page 的 div。如果加载物理页面 index.html，则可以使用 changePage 导航到该页面内的任何“页面”div。

但是，如果您想从其他物理页面加载“页面”，jQM 只会从该页面加载第一个“页面”div。实际发生的情况是您不更改页面，jQM 只需使用 ajax 加载特定的“页面”div 并将其注入当前页面。

您有两种可能的架构，您可以将所有“页面”放在一个 html 页面中并从那里导航。或者你可以有多个页面架构。你可以随时混合这个。

要物理更改页面，您需要将 rel=external 添加到您的链接。

于 2013-04-04T07:25:14.333 回答