如果 JavaScript 在单独的文件中，Cordova 应用程序将不起作用答案

【问题标题】：Cordova application doesn't work if JavaScript is in separate file如果 JavaScript 在单独的文件中，Cordova 应用程序将不起作用
【发布时间】：2017-10-28 11:10:05
【问题描述】：

我希望在单击按钮时显示警报窗口。我试图在浏览器中运行它。我也尝试在没有 jQuery 的情况下做到这一点——同样的问题。在我的 HTML 中，我只有一个按钮：

 <html>
<head>
    <title>Device Ready Example</title>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="js/index.js"></script>
    <button id="btn">BUTTON</button>
</head>
<body>
</body>
</html>

这是我的 JavaScript 文件（Chrome 控制台中没有错误消息）：

function App() {
        var initialize = function () {
            onload();
        }

        onLoad = function () {
            document.addEventListener('deviceready', function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );
        }, false);
        }


        onDeviceReady = function () {
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("btn", onMenuKeyDown, false);
        }

        onPause = function () {
        }

        onResume = function () {
        }

        onMenukeyDown = function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );

        }
    };
    var app = new App;

【问题讨论】：

标签： javascript jquery cordova phonegap

【解决方案1】：

您需要了解 PhoneGap 应用的工作原理。它们不是网站，因此它们的行为与您在浏览器中运行它们时的行为不同。 PhoneGap 应用程序在 webview 中运行沙盒，与 web 浏览器共享许多功能，但有重要区别。一个重要的区别是安全性，它会导致您遇到的问题。

您正在直接从网络链接 jQuery 库。当您在手机上运行该应用程序时，webview 将阻止该文件，因为出于安全原因，它会阻止访问任何外部网站。所以你得到的应用程序没有 jQuery。

您必须将 jQuery 文件下载到本地文件夹并相应更改链接。

与您的问题无关，我还建议先加载 cordova.js（在 jQuery 或任何其他脚本之前）。

【讨论】：

【解决方案2】：

问题在于您的 index.js 语法。如果你有一个 JavaScript 对象，你需要像这样实例化：

 function App() {
        var initialize = function () {
            onload();
        }
        onLoad = function () {
            document.addEventListener("deviceready", onDeviceReady, false);
        }


        onDeviceReady = function () {
            document.addEventListener("pause", onPause, false);
            document.addEventListener("resume", onResume, false);
            document.addEventListener("btn", onMenuKeyDown, false);
        }

        onPause = function () {
        }

        onResume = function () {
        }

        onMenukeyDown = function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );

        }
    };
    var app = new App;

deviceready 事件监听器只有在您在移动设备上运行您的应用程序时才能工作，或者您可以添加浏览器 cordova 平台以使用这种方式。

但您的问题的答案是，只需使用 jquery。 index.html：

<html>
<head>
    <title>Device Ready Example</title>
    <button id="btn">BUTTON</button>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script>
        document.addEventListener('deviceready', function () {
            $("#btn").click(
                function () {
                    alert("ALERT");
                }
            );
        }, false);
    </script>
</head>
<body>
</body>
</html>

【讨论】：

我在app.initialize() 之前添加了var app = new App;，在Android 上仍然没有。也试过没有 .initialize();
您是否在控制台中遇到了一些错误？您可以使用 Chrome 进行调试。
我会尝试编辑答案中的最后一个代码，但现在我在这一行有 Unexpected identifier：function onLoad() {
它告诉我在这一行有意外的标识符：onDeviceReady = function () {
我上次编辑过 :)。它对我有用。你不需要 onload="onLoad()"