无法从第二个包含的 js 文件中调用第一个包含的 javascript 文件的函数

Question

我正在使用 Apache Cordova 制作一个 Android 应用程序。一切都在 Android 6.0 上运行，它默认使用 Chrome，问题出在 Android 4.2.2 (Samsung Galaxy S4 mini) 上，它使用默认的 Android 浏览器.

如果我没记错的话，应用程序在使用 cordova 编译并安装在 Android 操作系统后，在默认 Android 浏览器中是 "started"。

在默认 Android 浏览器中，页面在加载时为空。但在 Chrome 中一切正常。

问题出在默认的 Android 4.2.2 浏览器中。它在诺基亚 1520 的默认浏览器中不起作用（使用 Windows Phone OS）。

index.html:

<!DOCTYPE html>
<html>
    <head>
        <script src="js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script src="2.js" type="text/javascript"></script>
        <script src="1.js" type="text/javascript"></script> 
    </head>
    <body>
        <div id="content">
        </div>
    </body>
</html>

1.js:

$(document).ready(function() {
    $('#content').html("<span>test3</span>"); // Works fine (i can see test3 on the page).
    showLogin();
});

2.js（此文件中的任何内容均无效，我在页面上看不到 test1 和 test2）：

$('#content').html("<span>test1</span>");

function showLogin() {
    $('#content').html(`<span>
                        test2
                        </span>`);
}

我尝试了什么#1

我也试过在setTimeout()里面调用showLogin():

setTimeout(function() {
    showLogin();
}, 1000);

我尝试了什么#2

1.js:

$(document).ready(function() {
    $('#content').html("<span>test3</span>"); // Works fine.
    showLogin();
});

2.js（此文件中的任何内容均无效）：

$(document).ready(function() {
 $('#content').html("<span>test1</span>");

    function showLogin() {
        $('#content').html(`<span>
                    test2
                    </span>`);
    }
});

Answer 1

也许我错了，但我认为“$('#content').html("test1");”它崩溃 2.js 并且从未调用过 showLogin。

我会尝试这样的事情：

$(document).ready(function() {
    $('#content').html("<span>test1</span>");
});
function showLogin() {
    $('#content').html("<span>test2</span>");
}

或者至少单独使用 showlogin 函数来尝试一下。

希望对您有所帮助

Answer 2

问题出在 2.js 文件

$('#content').html("<span>test1</span>");

function showLogin() {
    $('#content').html("<span>test2</span>");
});

在最后一行，您使用了小括号来阻止函数，因此它是未定义的。删除大括号后的小括号。工作示例 See here

Answer 3

所以 Android 4.2.2 stock 浏览器有问题。并且调试输出不起作用。你想在这个问题上坚持多久？

这是一种解决方法：将文件写入多个文件并合并它们，然后再将它们推送到 .apk，这样您最终只会得到一个文件。缺点是您可能很难使用合并的文件进行调试。但是，正如您所说，使用 Android 6.0 它可以工作，所以用它来调试。 Google-fu 显示了这些选项：Grunt and Gulp.js

其他选项是查看是否使用 requirejs works or not. See this post 了解更多信息。

Answer 4

试一试，您可以在 1.JS 的设备就绪或事件触发的调用上动态加载脚本：

var script = document.createElement('script');
script.src = //path of 2.JS file;
script.type = "text/javascript";
script.onload = function () {
     showLogin();//
};

Answer 5

问题是由多行 JavaScript 字符串“`”的引号引起的。

我更改后：

function showLogin() {
    $('#content').html(`<span>
                        test2
                        </span>`);
}

为此：

function showLogin() {
    $('#content').html("<span>test2</span>");
}

一切正常。

看起来这些报价在现有的 Android 浏览器中不受支持。我猜这在 2.js 文件中触发了一个异常，这就是 2.js 中的其他代码没有执行的原因。

我最终像这样对多行字符串使用了反斜杠：

function showLogin() {
        $('#content').html("<span>\
                            test2\
                            </span>");
}

反斜杠在单引号内也有效，像这样：

function showLogin() {
        $('#content').html('<span>\
                            test2\
                            </span>');
}

无法从第二个包含的 js 文件中调用第一个包含的 javascript 文件的函数

Can't call functions from first included javascript file from the second included js file

javascript

jquery

android

android-browser

cordova