【问题标题】：Why I have to put all the script to index.html in jquery mobile为什么我必须将所有脚本放在 jquery mobile 中的 index.html 中
【发布时间】：2013-03-25 20:57:05
【问题描述】：

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

例如，我的 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中，我期望的就完成了。无论如何，如果我将所有脚本放在同一个页面上，项目将变得越来越难以保存。感谢您的帮助。

【问题讨论】：

标签： javascript jquery html cordova jquery-mobile

【解决方案1】：

简介

这篇文章也可以在我的博客中找到HERE。

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 triggered after changepage

另一个工作示例：Page loaded differently with jQuery-mobile transition

解决方案 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 页面架构的 ARTICLE。简而言之，我正在讨论 jQuery Mobile 如何工作的知识是您在成功创建第一个应用程序之前需要了解的最重要的事情。

【讨论】：

相当完美的答案！所以我们的结论是，我们不能把每个js文件分成每个页面吗？这使得我们的应用程序很难保存。我担心这是否意味着一个 javascript 错误会使整个应用程序在 JqueryMobile 上崩溃。
方案一中，包含外部脚本文件有这么难看吗？
这当然不是一个坏主意，我更喜欢将所有内容都放在外部文件中。
@Gajotres 解决方案 #1 有什么难看的？
天哪，如果我先读到这篇文章，我本来可以避免拉扯头发的，谢谢！

【解决方案2】：

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

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

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

也不需要调用deviceready，使用下面的语法来调用你的页面特定的js函数

$(document).on('pageshow', '#YourPageID', function(){
    // Your code goes here
});

【讨论】：

【解决方案3】：

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

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

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

要实际更改页面，您需要在链接中添加 rel=external。

【讨论】：