为什么我要把所有的脚本在jquery移动index.html

Why I have to put all the script to index.html in jquery mobile

本文关键字：jquery 移动 index html 脚本 我要 为什么      更新时间：2023-09-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中，我所期望的就完成了。无论如何，如果我把所有的脚本放在同一个页面上，项目将变得越来越难以保存。谢谢你的帮助。

简介

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

jQuery Mobile如何处理页面更改

要理解这种情况，你需要了解jQuery Mobile是如何工作的。它使用ajax加载其他页面。

第一个页面正常加载。其中 HEAD 和 BODY 被加载到 DOM 中，等待其他内容。当加载第二个页面时，只有它的 BODY 内容被加载到 DOM 中。更准确地说，即使 BODY 也没有完全加载。只有第一个div具有属性data-role="page"将被加载，其他的都将被丢弃。即使在中有更多的页面，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在更改页面后未触发

另一个工作示例:页面加载不同的jQuery-mobile转换

<标题>解决方案2 h1> 所有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移动应用程序将表现得像一个普通的web应用程序。不幸的是，这不是一个很好的解决方案，在您的情况下。Phonegap不应该像普通的web应用那样工作。

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

官方文档，查找章节:链接不使用Ajax

<标题>现实的解决方案

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

现在你可以问我为什么?

Phonegap 像jQuery移动是有缺陷的，迟早会有一个错误，你的应用程序将失败(包括加载DOM)，如果你的每一个js内容是在一个单一的HTML文件。DOM可以被擦除，并且 Phonegap 将刷新当前页面。如果该页面没有javascript，它将无法工作，直到它重新启动。

<标题>最后的话

这个问题可以很容易地通过一个好的页面架构来解决。如果有人感兴趣的话，我已经写了一篇关于jQuery Mobile页面架构的文章。简而言之，我要讨论的是，在你成功创建第一个应用程序之前，了解jQuery Mobile的工作原理是最重要的事情。

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

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

就像我之前说的，确保在所有的html文件中导入js文件。

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

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

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

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

你有两种可能的架构，你把所有的"页面"在一个html页面，并从那里导航。或者您可以有多个页面架构。你可以把它们混在一起。

要物理更改页面，您需要在链接中添加rel=external

相关文章：