Я делаю приложение для Android с Apache Cordova. Все работает на Android 6.0, который по умолчанию использует Chrome, проблема в Android 4.2.2 (Samsung Galaxy S4 mini), который использует браузер Android по умолчанию.

Если я не ошибаюсь, то приложение «запускается» в браузере Android по умолчанию после того, как оно скомпилировано с помощью cordova и установлено в операционной системе Android.

В браузере Android по умолчанию страница пуста при загрузке. Но в Chrome все отлично работает.

Проблема в браузере Android 4.2.2 по умолчанию. Он не работает в браузере по умолчанию для Nokia 1520 (который использует ОС Windows Phone).

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

Я также попытался вызвать showLogin() внутри setTimeout():

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>`);
    }
});
3
Tadej 13 Дек 2016 в 11:14

6 ответов

Лучший ответ

Проблема была вызвана кавычками для многострочной строки 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>');
}
1
Tadej 21 Дек 2016 в 11:15

Возможно, я ошибаюсь, но я думаю, что "$ ('# content'). Html (" test1 ");" это сбой 2.js и showLogin, он никогда не вызывается.

Я бы попробовал что-то вроде этого:

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

Или, по крайней мере, оставьте в покое функцию showlogin, чтобы попробовать ее.

Надеюсь, это поможет

-3
Lombard 14 Дек 2016 в 00:17

Проблема в файле 2.js

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

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

В последней строке вы использовали небольшую скобку, которая тормозит функцию, поэтому она не определена. снимите небольшую скобу после фигурной скобки. рабочий пример см. здесь

-1
vinod rajput 13 Дек 2016 в 09:24

Попробуйте включить все свои сценарии непосредственно перед тегом </body>.

< Сильный > 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 должен включать

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

1.js должен включать

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

Другой подход

< Сильный > 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 должен включать

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

1.js должен включать

function showTest3() {
    $('#content').html("<span>test3</span>"); // Works fine.
    showLogin();
}
-1
Peter Darmis 19 Дек 2016 в 15:17

Попробуйте это, вы можете динамически загрузить скрипт на устройство уже 1.JS или на вызов, вызванный вашим событием:

var script = document.createElement('script');
script.src = //path of 2.JS file;
script.type = "text/javascript";
script.onload = function () {
     showLogin();//
};
0
Akshay Tilekar 21 Дек 2016 в 09:19

Так что с Android 4.2.2 в стоковом браузере что-то не так. И отладочный вывод не работает. Как долго вы хотите продолжать бить по этому поводу?

Вот один из способов обойти это: записать свои файлы в несколько файлов и объединить их, прежде чем отправлять их в .apk, так что в итоге вы получите только 1 файл. Недостатком является то, что вам может быть сложнее отладить объединенный файл. Но, как вы говорите, с Android 6.0 он работает, поэтому используйте его для отладки. Небольшая часть Google-фу показала следующие варианты: Grunt и Gulp.js

Другой вариант - посмотреть, работает ли requirejs или нет. См. Этот пост для получения дополнительной информации. ,

1
Community 23 Май 2017 в 12:33