初学PhoneGap,今天鼓捣了一天终于把环境以及如何创建项目搞明白了。首先说说我遇到的问题,我已经通过命令行创建好项目,并且手动加了该用的插件。随后我按照书里介绍的开开心心的敲了如下代码:

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, true);
    function onDeviceReady() {
        console.log("******phonegap*****");
        navigator.notification.alert("PhoneGap is working", function(){}, "", "");
    }
</script>

随后我编译项目,打开xcode,运行项目,满怀期待的想看一下效果。结果,xcode中console无任何信息,alert也没弹出。

这让我很费解,什么原因呢?找了好久,终于找到了原因。

大家打开index页面时,不知有没有注意到这样一段注释:

    <!--
    Customize this policy to fit your own app's needs. For more guidance, see:
        https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
    Some notes:
        * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
        * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
        * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
            * Enable inline JS: add 'unsafe-inline' to default-src
    -->

OK,这就是我上面问题的原因。原因是通过命令行生成的项目中,index页面中自动加入了如下代码段:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

这段代码默认禁用了行内javascript,所以导致我上面的问题,解决方法是在default-src中加入'unsafe-inline':

 <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

关于更多CSP资料可以参考:

http://www.2cto.com/Article/201408/327064.html