当前位置: 首页 > 知识库问答 >
问题:

为什么我要把所有的脚本index.htmljQuery移动

锺离德庸
2023-03-14

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

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

然后,我的设备将重定向到测试。html,似乎是

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

然而,脚本永远不会在test.html.执行然后我把脚本index.html,我期望的是完成。不管怎样,如果我把所有的脚本放在同一个页面上,项目将变得越来越难保存。感谢您的帮助。

共有3个答案

墨星鹏
2023-03-14

Jquery Mobile使用ajax加载“页面”。这里的“页面”是一个div,数据角色=页面。如果加载物理页索引。html,您可以使用changePage导航到该页面中的任何“页面”div。

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

您有两种可能的架构,将所有“页面”放在html页面中,然后从那里导航。也可以使用多页架构。你可以随时混合这个。

要物理更改页面,您需要将rel=外部添加到您的链接中。

国兴贤
2023-03-14

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

如果仔细观察,您会发现加载第二个页面时会考虑上一个页面中的JS文件。但是如果强制重新刷新当前页面,那么当前页面的js文件将生效。

因此,正如我前面所说的,请确保在所有html文件中导入js文件。

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

$(document).on('pageshow', '#YourPageID', function(){
    // Your code goes here
});
唐健
2023-03-14

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

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

首页正常加载。它的头部和身体被加载到DOM中,它们在那里等待其他内容。加载第二个页面时,只有其主体内容加载到DOM中。更准确地说,即使车身也没有满载。将只加载具有属性data role=“page”的第一个div,其他所有内容都将被丢弃。即使在正文中有更多的页面,也只会加载第一个页面。此规则仅适用于后续页面,如果初始HTML中有更多页面,则将加载所有页面。

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

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

不幸的是,您不会在他们的文档中找到描述。他们是否认为这是一个常识,或者他们忘记了像我的其他主题一样描述这一点。(jQuery Mobile文档很大,但缺少很多东西)。

在您的第二页和每隔一页中,将您的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 transition以不同方式加载页面

将所有javascript移到原始的第一个HTML中。收集所有内容并将其放在一个js文件中,放入头中。加载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>

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

在按钮和用于更改页面的每个元素中使用rel=“external”。正因为如此,ajax不会用于页面加载,您的jQuery移动应用程序的行为将类似于普通的web应用程序。不幸的是,在你的情况下,这不是一个好的解决方案。Phonegap永远不能作为普通的web应用程序使用。

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

官方文档,寻找一章:没有Ajax的链接

实际解决方案将使用解决方案2。但与解决方案2不同,我将使用相同的索引。js文件,并在每个可能的其他页面的标题中初始化它。

现在你可以问我为什么了?

像jQuery Mobile一样,Phonegap也有缺陷,如果你的每个js内容都在一个HTML文件中,迟早会出现错误,你的应用程序也会失败(包括加载的DOM)。DOM可能被删除,Phonegap将刷新当前页面。如果该页面没有javascript,则在重新启动之前将无法工作。

使用良好的页面体系结构可以轻松解决此问题。如果有人感兴趣,我已经写了一篇关于好的jQuery移动页面架构的文章。简而言之,我要讨论的是,在成功创建第一个应用程序之前,了解jQuery Mobile的工作原理是最重要的。

 类似资料:
  • 问题内容: 我已经使用$ .mobile.changepage在我的phonegap+jquerymobile项目中进行了重定向。但是,令我感到困惑的是,我需要将所有页面的脚本放在同一文件index.html中。否则,重定向页面将无法在其标题中执行该功能。 例如,我的index.html似乎是 然后,我的设备将重定向到似乎是 但是,该脚本将永远不会在test.html中执行。然后,将脚本放入ind

  • 我在一个Android布局文件中出错(忘记了我维度中的),在重新构建时,Android Studio将我对(由于错误构建,没有生成)的所有引用替换为。这是正常行为吗?如何禁用此功能?这是允许自动进口造成的吗?

  • 我已经创建了基于JAX-RS和使用Jersey嵌入式web服务器的RESTful web服务。我的ant脚本成功地编译了代码,但当我运行时,它给出了错误。所以经过研究,我想出了一个解决方案&这里是使用外部jar文件构建java ant文件。我所做的是创建一个捆绑的jar文件,尝试执行它&它工作得非常好。我想知道背后的原因: 为什么这个解决方案有效? 为什么要合并所有jar文件? 它是否类似于我们按

  • 问题内容: 我希望服务器每分钟执行一次节点脚本。如果我手动执行文件(),该程序将完美执行,因此,我很确定这不是问题。但是,当我将其交给cron执行时,什么也没发生。 这是cron文件中的行。 这是一个示例日志: 可执行文件: 知道我为什么要广播静音吗?我应该在其他地方调试? 更新: 我相信问题与我的相对文件路径有关,并且main.js从其自己的目录外部执行。 所以现在,我已经放置在目录中。看起来像

  • 我试图在Java做简单的聊天应用程序,但我得到这个错误。怎么了?我该怎么修好它?for循环中有一些错误? 我得到这个错误 线程“main”java.lang.IndexOutoFboundsException:索引0超出长度0的界限,位于java.base/jdk.internal.util.preconditions.OutoFbounds(preconditions.java:64)位于jav

  • 问题内容: 是否有一种简单可靠的方法来确定当前正在执行的JavaScript文件(在网页内)的URL? 我对此的唯一想法是扫描DOM中的所有脚本属性,以查找如何引用当前文件,然后将其应用于以确定绝对URL 。有人有其他想法吗,有没有我完全忽略的超级简单方法? 更新:通过DOM访问的脚本元素已经具有包含完整URL 的属性。我不知道它的普遍性/标准性如何,但是您可以选择使用它来返回[X] HTML中的