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

I'm making an Android application with Apache Cordova. Everything works on Android 6.0, which is using Chrome by default, the problem is on Android 4.2.2 (Samsung Galaxy S4 mini) which is using the default Android browser.

If i'm not mistaken, then the application is "started" in the default Android browser after it's compiled with cordova and installed on the Android operating system.

In the default Android browser the page is empty on load. But in Chrome everything works fine.

The problem is in the default Android 4.2.2 browser. It's not working in the default browser for Nokia 1520 (which is using the 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 (nothing inside this file works, i can't see test1 nor test2 on the page):

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

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

WHAT I TRIED #1

I also tried to call the showLogin() inside setTimeout():

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

WHAT I TRIED #2

1.js:

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

2.js (nothing inside this file works):

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

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

Flummox - don't be evil SE

So there is something wrong with Android 4.2.2 stock browser. And debug output is not working. How long do you want to keep hitting your head on this one?

Here is one way around it: write your files in multiple files and merge them before pushing them out to the .apk, so you will end up with only 1 file. Downside is that you might have a harder time debugging with the merged file. But, as you say, with Android 6.0 it works, so use that to debug. A bit of Google-fu showed these options: Grunt and Gulp.js

Other option would be to see if using requirejs works or not. See this post for more info.

The problem was caused by the quotes for the multiline JavaScript string "`".

After i changed this:

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

To this:

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

everything worked just fine.

It looks like that these quotes are not supported in the stock Android browser. I guess that this triggered an exception in the 2.js file and that was the reason that the other code in 2.js didn't execute.

I ended up using the backslashes for the multiline strings like this:

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

The backslash also works inside single quotes, like this:

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

give a try this, you can load script dynamically on deviceready of 1.JS or on your event triggered call:

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

the problem is in 2.js file

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

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

at the last line you used small bracket that is braking the function so it is undefined. remove the small bracket after the curly bracket. working example See here

Try including all of your scripts just before </body> tag.

HTML

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <div id="content">
        </div>
        <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> 
    </body>
</html>

2.js should include

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

1.js should include

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

Another approach

HTML

<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <div id="content">
        </div>
        <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>
        <script type="text/javascript">
        $(document).ready(function() {
        showTest1();
        showTest3();
        });
        </script> 
    </body>
</html>

2.js should include

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

1.js should include

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

Maybe im wrong, but i think "$('#content').html("test1");" its crahsing 2.js and showLogin its never called.

i would try something like this:

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

or at least put alone the showlogin function to try it.

Hope it helps

来源：https://stackoverflow.com/questions/41116344/cant-call-functions-from-first-included-javascript-file-from-the-second-include

标签

javascript

android

jquery

cordova

android-browser