jquery mobile 和phonegap开发总结之三跨域加载页面
跨域加载
一要进行一定的配置见下面
$( document ).bind( "mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
});
而,有时候开发在真机测试比较麻烦,所以建议使用谷歌浏览器进行测试,允许file协议
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security
右键谷歌浏览器的快捷方式,把目标改成上述内容
【引用】http://blog.csdn.net/mociml/article/details/8880161
1、phonegap不存在跨域访问问题,原因是phonegap使用的是 file:// 协议,Phonegap wiki里面说: ”The cross-domain security policy does not affect PhoneGap applications. Since the html files are called by webkit with the file:// protocol, the security policy does not apply.”
跨域访问问题出现是因为浏览器的同源限制策略:这里的“源”指的是主机名、协议和端口号的组合;我们可以把一个“源”看作是某个web页面或浏览 器所浏览的信息的创建者。 同源策略,简单地说就是要求动态内容(例如,JavaScript或者VBScript)只能阅读与之同源的那些HTTP应答和cookies,而不能阅读来自不同源的内容。也就是重点在使用http或https协议,而不是 file:// 协议。
2、phonegap与jquerymobile使用
http://jquerymobile.com/demos/1.0/docs/pages/phonegap.html 文档中有详细说明
要点:
(1)$.support.cors =true;使jQuery支持跨域访问
(2)$.mobile.allowCrossDomainPages=true; 如果需要跨域访问页面文件,设置为true;
(3)添加phonegap白名单
文档说明地址 http://docs.phonegap.com/en/2.7.0/guide_whitelist_index.md.html#Domain%20Whitelist%20Guide
默认develop版本不做任何限制,支持所有网络访问,建议production版本修改只包含需要的白名单
如果还有问题:
1)关闭pushstate
- $.mobile.pushStateEnabled = false;
2)强制延长url加载超时时间
- super.setIntegerProperty("loadUrlTimeoutValue", 60000);
最后别忘了,添加各自对应操作系统的权限
如android,打开AndroidManifest.xml文件,添加网络访问权限:
<uses-permission android:name="android.permission.INTERNET" />