使用jQuery Mobile构建PhoneGap应用 Building PhoneGap apps with jQuery Mobile
PhoneGap是一个HTML5的应用平台,能够让开发者使用web技术开发出原生的应用,并且能够调用手机的api.应用可以像普通的HTML页面一样构建,然后打包并在UIWebView里像原声的应用一样运行。因。为PhoneGap和jQuery Mobile结合应用的比较频繁,我们在这里提供一些提示和建议。
PhoneGap应用是通过一个本地的file:// URL文件来加载初始化的应用文档的。这意味着如果你想从公司的服务器调用页面的话,必须调用的是绝对地址。因为文档是从file:// URL的地址发起的,从远程的服务器加载页面或资源的话会被认为是跨域的请求而被禁。
Phone Gap jQuery Mobile 的应用能否有权限访问跨域的页面由两个参数控制: $.support.cors 和 $.mobile.allowCrossDomainPages,也可能会被PhoneGap框架的白名单机制所影响。
$.support.cors
在jQuery的核心方法中,$.support.cors指示jQuery是否支持W3C的"Cross-Origin Resource Sharing" (跨域资源共享)。
因为jQuery Mobile依赖于jQuery核心的$.ajax()方法,所以$.support.cors必须设为true来告知$.ajax可以跨域加载文件,我们已经收到报告,在某些平台的webviews 下,比如黑莓,支持跨域加载。但是jQuery的核心默认的$.support.cors为false,会导致$.ajax() 不能跨域请求,从而加载失败。
$.mobile.buttonMarkup.hoverDelay
如果你发现按钮的按下/划过的 状态感觉反应有些迟缓,那$.mobile.buttonMarkup.hoverDelay的设置 可能就用得上了。他会缩短touch事件和应用相关元素class替换的时间间隔,但也有可能会导致用户在滚屏的时候class就应用上了(比如在一个长列表上滚屏的时候)。
$.mobile.allowCrossDomainPages
当jQuery Mobile尝试加载外部页面的时候,请求会通过$.mobile.loadPage()发出。
只有当$.mobile.allowCrossDomainPages被设为true的时候,跨域的请求才会通过。
因为jQuery Mobile框架会通过浏览器的location hash值来跟踪哪些页面被浏览过,如果有问题
的 跨站脚本攻击(XSS攻击)能够修改hash 值并设为一个跨域URL值的话,就可能会有安全性上
的问题。这就是为什么$.mobile.allowCrossDomainPages 默认设为false.
所以如果PhoneGap应用想要加载远程服务器的文件,
$.support.cors 和 $.mobile.allowCrossDomainPages 都必须设为true.并且 $.mobile.allowCrossDomainPages的设置必须要在跨域请求之前完成。 所以我们建议在mobileinit 中这样写:
html 代码:
$( document ).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
});
PhoneGap 白名单 PhoneGap White Listing
PhoneGap 1.0引入了白名单服务器的概念使得允许内部的webview做跨域的请求。
但是,不是所有的平台都支持白名单的特性,所以具体请查看PhoneGap的文档
还有疑问? Still having issues?
下面是一些其他的建议,与PhoneGap 没有直接的关系,但是最好了解一下。
我们建议关闭jquery mobile的pushState特性来安装app,因为个别情况下这项特性会导致不可预料的导航问题,并且因为URL地址在webview中不可见。也不值得开启。
Android 系统在加载URL地址的时候会强制一个timeout时间,这个时间对你来说可能太短了。可以在Eclipse的Android插件里编辑那个java类来更改这个timeout时间。
super.setIntegerProperty("loadUrlTimeoutValue", 60000);