如果 JavaScript 在单独的文件中，Cordova 应用程序将无法运行

Question

我希望在单击按钮时显示警报 window。我试图在浏览器中运行它。我也尝试在没有 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;

Answer 1

问题出在您的 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;

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

但是您的问题的答案是，只需使用 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>

Answer 2

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

您正在 link 直接从 Web jQuery 图书馆。当您运行您 phone 上的应用程序时，网络视图将阻止该文件，因为出于安全原因，它会阻止访问任何外部网站。所以你得到的应用没有 jQuery.

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

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

如果 JavaScript 在单独的文件中，Cordova 应用程序将无法运行

Cordova application doesn't work if JavaScript is in separate file

javascript

jquery

cordova

phonegap