jQuery Mobile 页面丢失 JavaScript 文件

Question

我在使用 jQuery Mobile 时遇到了真正的问题，我尝试修复但失败了 :-(

我有一个导航来浏览我的应用程序，如果我单击与站点相关的链接，该站点具有用于执行某些功能的 .js 文件，则 .js 文件将丢失。 如果我查看萤火虫，我在<html>代码的<head>看不到我指定的“get-marker-id.js”。 如果我刷新页面，将出现 .js 文件并且一切正常，所有功能都已找到并且运行良好。

作为一种解决方法，我发现给导航的<a> -Tag 一个rel=external属性可以解决这个问题，因为该站点是完全加载的，而不是来自 ajax 调用。

现在我想知道我是否可以通过更好的解决方法解决问题？ 因为如果我使用"rel=external" ，移动 Safari 会打开一个新标签，如果我将页面保存到我的主屏幕，这是我的客户不想要的 =(。我非常感谢帮助 :-)

Answer 1

如果我们假设我们从 jquery mobile 的简单单页模板开始，那么就会遗漏一些关键信息。 如果您希望拥有全局可用的函数和变量并能够更改框架的默认值，则需要在 jquery.js 和 jquerymobile.js 之间添加自定义脚本，如其全局配置页面所示。

<head>
    ...
    <script src="jquery.js"></script>
    <script src="custom-scripting.js"></script>
    <script src="jquery-mobile.js"></script>
    ...
</head>

当您使用基于 ajax 的内置导航从一个页面转到下一个页面时，custom-scripting.js 中的所有内容仍然可供您使用，甚至可以用于在页面进入时对其进行操作。

但是，如果您在<div data-role="page">放置了一个脚本，则只有在该页面就位时，您才有权执行该脚本。 一旦您导航到另一个页面，该初始页面将从 DOM 中删除，从而从您的脚本中删除。 因此，您需要在每个页面上调用您的脚本或将其放入 custom-script.js。 使用全局脚本将是一个性能更高的选项，因为移动设备中的 http 请求是导致大部分速度变慢的原因。

Answer 2

如果您链接到 .js 文件在您正在加载的页面中的 jquery-mobile“role-page”元素之外，则在通过 ajax 加载页面时根本不会解析它。 我不确定“角色页面”元素内的链接，但我知道内联脚本确实会被解析。 尝试在页面元素内移动脚本。

Answer 3

我在这里看到 2 件事，但无法决定哪个更适合移动应用程序？

1) 将您的 custom.js 放在 index.html 的 head 部分中的 jquery 和 jquerymobile 之间。

这样，您将拥有一个更大的 .js 文件，其中包含所有页面触发器（pageshow、pageinit ..），并且该文件只会加载一次（更少的 http 请求）
我遇到的问题：当您在某个页面上单击应用程序中间的浏览器重新加载按钮时，位于 custom.js 中的 ajax 等动态内容将不会加载。 结果：空白页。 （对于单页 jqm 应用程序中的页面书签的计数相同）

2) 在 data-role=page div 内的单页模板中的每个 JQM 页面上包含特定的自定义编码页面。

我现在假设当重新加载低谷浏览器按钮时，代码也会重新加载（它在那里）但同样，页面更大。

我的问题是：如何像 1) 那样有解决方案，但又支持页面重新加载

jQuery Mobile 页面丢失 JavaScript 文件

问题描述

3 个解决方案

解决方案1
3 已采纳 2011-12-19 20:20:29

解决方案2
2 2011-12-19 16:35:18

解决方案3
0 2012-09-24 22:53:33

jQuery Mobile 页面丢失 JavaScript 文件

问题描述

3 个解决方案

解决方案1 3 已采纳 2011-12-19 20:20:29

解决方案2 2 2011-12-19 16:35:18

解决方案3 0 2012-09-24 22:53:33

解决方案1
3 已采纳 2011-12-19 20:20:29

解决方案2
2 2011-12-19 16:35:18

解决方案3
0 2012-09-24 22:53:33