2011-12-19 154 views
4

嘿家伙有一个与jQuery Mobile真正的问题,我试图解决,但我失败了:-( 我有一个导航浏览低谷我的应用程序,如果我点击一个链接这与一个网站有关,它有一个用于执行某些功能的.js文件,.js文件丢失了。如果我看着萤火虫,我没有看到我指定的“get-marker-id.js”如果我刷新页面,.js文件出现,并且一切正常,所有功能都找到并且工作完美。jQuery Mobile页面丢失JavaScript文件

作为一种解决方法,我发现为了给导航的标签rel=external属性解决了这个问题,因为该站点是完全加载的,而不是从ajax调用。

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

回答

3

如果我们假设我们从jquery mobile的简单的single page template开始,那么就会忽略一些关键信息。如果你想拥有全局可用的函数和变量,并且能够改变框架的默认值,你需要在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导航,一切都在定制scripting.js仍然会提供给你甚至可以用来操纵页面作为自己的未来英寸

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

+0

1)问题指出,使用'相对=“外部”'作品这表明该网站是不是单页面模板,但有几个链接的HTML文档。 2)如果你绑定到'mobileinit'事件(这是你如何配置默认值,所以你是对的),你只需要在你建议的庄园中包含外部JS。 3)如果你将JS放在'data-role =“page”'元素中,它们将被包含在AJAX调用中,但是当该页面从DOM中删除时,JS仍然可用。最后我相信最好的解决方案是在每个页面上包含'custom' JS文件。 – Jasper 2011-12-19 22:16:48

+0

正确的,单页面模板是一个独立的页面,可以像链接的HTML文档一样工作,并且可以被AJAX调用。我把它称为假设它是一个起点,正如你所说,它是由rel =外部。多页面模板是在单个DOM中有几个“页面”的模板,他的例子显然不是。认为我们只是有一点语义问题。 – sgliser 2011-12-19 22:39:47

+0

我同意你对每个页面上包含的自定义js文件的最新评论。如果用户刷新了几页,不这样做可能会导致失败的页面。我应该在我原来的发帖中调出该页面。谢谢贾斯帕。一如既往,你达人。 – sgliser 2011-12-19 22:41:38

2

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

0

我在这里看到2件事,不能决定什么是更好的移动应用程序?

1)将你的custom.js放在jquery & jquerymobile之间的index.html头部分。

  • 这种方式,你将有一个较大的.js的所有网页触发(pageshow,pageinit ..)内,该文件将只加载一次(更少的HTTP请求)

  • 文件我遇到的问题:当您在应用程序中间点击浏览器重新加载按钮时,位于custom.js中的动态内容(如ajax等)将无法加载。结果:空白页面。在数据角色=页面格内的单页模板每JQM页 - (为书签的页面在单页JQM应用程序相同的计数)

2)包括特定的自定义代码页。

  • 我假设现在当重新加载谷浏览器按钮代码也将重新加载(它在那里),但再次,更大的网页。

我的问题是:如何能有像在1解决方案),但随后再次支持页面重载