jQuery Mobile 页面丢失 JavaScript 文件答案

【问题标题】：jQuery Mobile page loses JavaScript filejQuery Mobile 页面丢失 JavaScript 文件
【发布时间】：2011-12-19 16:23:07
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

如果我们假设我们从简单的开始，single page template 来自 jquery mobile，那么有一个关键信息被遗漏了。如果您希望拥有全局可用的函数和变量并能够更改框架的默认值，则需要在 jquery.js 和 jquerymobile.js 之间添加自定义脚本，如 global configurations page 所示。

<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 请求是导致大部分速度下降的原因。

【讨论】：

1) 问题指出，使用rel="external" 可以工作，这表明该站点不是单页模板，而是几个链接的 HTML 文档。 2）如果您绑定到mobileinit 事件（这是您配置默认值的方式，所以您是对的），您只需要在您建议的庄园中包含外部JS。 3) 如果您将 JS 放在 data-role="page" 元素中，它们将包含在 AJAX 调用中，但是当该页面从 DOM 中删除时，JS 仍然可用。最后，我认为最好的解决方案是在每个页面上包含custom JS 文件。
对，单页模板是独立的页面，作为链接的 HTML 文档工作并被 ajax 插入。我称它为假设它是起点，正如你所说，由 rel=external 支持。多页模板是在单个 DOM 中具有多个“页面”的模板，而他的示例显然不是。认为我们只是遇到了一点语义问题。
我同意您关于每个页面都包含自定义 js 文件的最后评论。如果用户刷新了几页，不这样做可能会导致页面失败。我应该在我原来的帖子中指出这一点。谢谢贾斯珀。一如既往，你这个男人。
谢谢您的解决方案。我现在通过在每个页面上的jquery.js 和jquery-mobile.js 之间添加 .js 文件来修复它，这对我有用:-)。我还读到data-ajax="false" 也解决了我的问题，但是我没有 ajax 导航，所以你的解决方案更适合。谢谢！

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

我遇到的问题：当您在某个页面上单击应用程序中间的浏览器重新加载按钮时，位于 custom.js 中的 ajax 等动态内容将无法加载。结果：空白页。（在您的单页 jqm 应用中的页面书签的计数相同）

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

我认为现在重新加载槽浏览器按钮时，代码也会重新加载（它就在那里），但同样，页面更大。

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

【讨论】：