为什么您的 JavaScript 脚本应该包含在 jQuery Mobile 项目的 index.html 中？

为什么您的脚本需要驻留在 jQuery Mobile 中的 index.html 中

在 jQuery Mobile 项目中，使用 $.mobile.changepage 在页面之间重定向时可能会遇到混乱。出乎意料的是，重定向页面的脚本无法执行，让您一无所知。

了解 jQuery Mobile 的页面处理

要理解这种情况，掌握 jQuery Mobile 的页面处理机制至关重要。它利用 AJAX 加载后续页面。虽然第一个页面按常规加载，但后续页面仅接收其 BODY 内容（具体来说，具有 data-role="page" 属性的第一个 DIV），而 HEAD 内容将被忽略。

这意味着脚本重定向页面的BODY内容中定义的内容将不会执行。原因是页面转换期间未加载包含必要库的父 HEAD。

解决方案 1：在正文中包含脚本

要解决此问题，请移动 SCRIPT 标签将重定向页面添加到其 BODY 内容中：

    <div data-role="page">
        // Other HTML content
        <script>
            // Javascript code
        </script>
    </div>

尽管此解决方案有效，但它可能会因多个 SCRIPT 标记而使 HTML 变得混乱。

解决方案 2：在 index.html 中合并脚本

更好的方法是将所有 JavaScript 逻辑集中在 index.html 中，方法是将其包含在 HEAD 中的单独 JS 文件中：

    <meta name="viewport" ...>
    <link rel="stylesheet" href="jquery.mobile-1.2.0.min.css">
    <script src="jquery.mobile-1.2.0.min.js"></script>    
    <script src="index.js"></script> // Custom JS file

为什么 index.html 是最重要的

虽然解决方案 2 整合了脚本，但将它们包含在 index.html 中仍然至关重要。这主要是由于 Phonegap 的 bug 性质。如果发生错误，Phonegap 可能会刷新当前页面，从而丢失其 DOM。刷新页面的 HEAD 中不存在的任何 JavaScript 代码都不会执行。

通过将脚本集中在 index.html 中，必要的库始终加载在 HEAD 中，即使在潜在的 Phonegap 错误之后也能确保功能不间断.

以上是为什么您的 JavaScript 脚本应该包含在 jQuery Mobile 项目的 index.html 中？的详细内容。更多信息请关注PHP中文网其他相关文章！