javascript在科尔多瓦应用程序中不起作用答案

【问题标题】：javascript not working in cordova appjavascript在科尔多瓦应用程序中不起作用
【发布时间】：2017-03-21 19:13:56
【问题描述】：

Javascript 似乎无法在我的 cordova 应用程序中运行，而且我似乎无法弄清楚我在这里做错了什么。我确信在普通的网络浏览器中 html 和 javascript 可以正常工作。

下面是我的代码，我正在创建一个简单的计算器。

index.html:

<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <!--
        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
        -->
        <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 *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/design.css">
        <title>Calculator</title>
    </head>
    <body>
        <div id="calculator">
            <form>
                <input type="text" id="display" disabled><br>

                <input type="button" value="C" id="keys" onclick="addtoscreen('c')">
                <input type="button" value="<--" id="keys" onclick="backspace()">
                <input type="button" value="X^2" id="keys" onclick="power(2)">
                <input type="button" value="+" id="keys" onclick="addtoscreen('+')"><br>

                <input type="button" value="9" id="keys" onclick="addtoscreen('9')">
                <input type="button" value="8" id="keys" onclick="addtoscreen('8')">
                <input type="button" value="7" id="keys" onclick="addtoscreen('7')">
                <input type="button" value="-" id="keys" onclick="addtoscreen('-')"><br>

                <input type="button" value="6" id="keys" onclick="addtoscreen('6')">
                <input type="button" value="5" id="keys" onclick="addtoscreen('5')">
                <input type="button" value="4" id="keys" onclick="addtoscreen('4')">
                <input type="button" value="*" id="keys" onclick="addtoscreen('*')"><br>

                <input type="button" value="3" id="keys" onclick="addtoscreen('3')">
                <input type="button" value="2" id="keys" onclick="addtoscreen('2')">
                <input type="button" value="1" id="keys" onclick="addtoscreen('1')">
                <input type="button" value="/" id="keys" onclick="addtoscreen('/')"><br>

                <input type="button" value="0" id="keys" onclick="addtoscreen('0')">
                <input type="button" value="." id="keys" onclick="addtoscreen('.')">
                <input type="button" value="=" id="equal" onclick="answer()">
            </form>
        </div>
    </body>
    <script type="text/javascript" src="js/logic.js"> </script>
</html>

logic.js：

var box = document.getElementById("display");

function addtoscreen(x){
    box.value +=x;

    if(x == "c"){
        box.value='';
    }
}

function answer(){
    x=box.value
    x=eval(x);
    box.value=x;
}

function backspace(){
    var number=box.value;
    var len= number.length-1;
    var newnumber=number.substring(0, len)
    box.value=newnumber;
}

function power(y){
    x=box.value;
    x=Math.pow(x, y);
    box.value=x;
}

【问题讨论】：

标签： javascript html cordova

【解决方案1】：

我认为问题出在您的 Content-Security-Policy 元标记中。您正在阻止内联脚本。以下代码应该可以工作。

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

在您自己的文件中有更多关于 Content-Security-Policy 的信息；） https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy

【讨论】：

非常感谢会看看！

【解决方案2】：

对于遇到相同问题的其他人，我通过添加此行来修复它。

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

更多信息可以在这里找到： https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/

【讨论】：