Веб-браузер Android пропускает JavaScript даже с помощью setJavascriptEnabled (true) и WebChromeClient

Question

(при использовании Samsung Galaxy Tab и Android 3.0 он предназначен для работы на каждом планшете 3.0+, как это происходит в их браузерах, но не в веб-просмотре)

У меня есть страница с CSS и jQuery, которая нормально загружается в браузерах, браузерах Android и устройствах iOS, но Android WebView отказывается загружать ее постоянно.

Я сузил проблему, просто пропустив javascript при загрузке (повторив проблему с некоторыми демонстрационными приложениями javascript в webview). Почему это?

ЗДЕСЬ ПОЛНЫЙ ТЕСТОВЫЙ КОД HTML http://pastebin.com/GmE2vEYx

и вот как я это называю:

  myWebview.loadUrl("file:///android_asset/myPage.html");
  myWebview.getSettings().setJavaScriptEnabled(true);
  myWebview.setWebChromeClient(new WebChromeClient());

Порядок этих трех вызовов не влияет на результат.

  myWebview.getSettings().setJavaScriptEnabled(true);
  myWebview.setWebChromeClient(new WebChromeClient());
  myWebview.loadUrl("file:///android_asset/myPage.html");

Одна вещь, которую я заметил, это то, что если вы дадите ему время (приостановив приложение с точкой останова в отладчике), тогда javascript будет загружаться более последовательно. Это привело меня к некоторым надуманным экспериментам по попытке замедлить загрузку приложения, но это на самом деле нежелательный пользовательский опыт. Я очень надеюсь, что Android WebView действительно не IE6 мобильной разработки.

Дополнительные факты:

Если вы удалите теги <script>, которые содержат весь Jquery, то страница быстро загружается со всем форматированием CSS. Как только Jquery добавлен, ничего не загружается вообще.

Я также нашел несколько других вопросов, которые сталкиваются с точно такой же проблемой, многие остаются без ответа или не имеют окончательного ответа на то, что ищет ОП: (

см: Android: не удается заставить JavaScript работать в WebView даже с setJavaScriptEnabled (true)

При перезагрузке страницы (Webview.loadUrl) Javascript не обрабатывается (полностью)

http://groups.google.com/group/android-developers/browse_thread/thread/9962064ef217a5a7#

JavaScript иногда не работает в веб-представлении Android

Android WebView не загружает файл JavaScript, но браузер Android загружает его нормально

Веб-браузер Android не может обрабатывать JavaScript?

предложения? давайте доберемся до сути этого! В документации Android говорится, что у веб-просмотра есть ограничения, но я не знаю, где этот предел, так как люди все время создают приложения HTML CSS JS!

Answer 1

Ответ заключается в том, что javascript должен быть в функциях в разделах HTML-страницы <script>, а затем должен быть добавлен webview.loadUrl("javascript:yourJavascriptFunction()") after webview.setWebviewClient(new WebviewClient(){ public void onPageFinishedLoading(){ ...//js injections here });

Answer 2

У меня также есть Samsung Galaxy Tab и Android 3.0 с jQuery javascript веб-страницей, и это работает.Убедитесь, что ваша страница работает в браузере Crome, и что у вас нет ошибок JavaScript.Существуют известные проблемы с некоторыми стилями CSS3 (например, исчезают изображения), но jQuery должен работать.Если вы пытаетесь общаться с JavaScript, убедитесь, что вы делаете это после загрузки страницы.Убедитесь, что все файлы находятся в правильном каталоге :).Также иногда содержимое кэшируется, поэтому попробуйте удалить его (или удалить приложение).

Пожалуйста, укажите исходный код вашей веб-страницы, чтобы мы могли проверить.

Пример веб-просмотра:

webView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setPluginsEnabled(true);
webSettings.setLoadsImagesAutomatically(true);
webSettings.setSupportZoom(false);

webView.setScrollBarStyle(WebView.SCROLLBARS_INSIDE_OVERLAY);
webView.setWebViewClient(new WebViewClient()
{
    @Override
    public void onPageFinished(WebView view, String url) 
    {
        // page loaded...
        super.onPageFinished(view, url);
    }
});
webView.setWebChromeClient(new WebChromeClient()
{
    @Override
    public boolean onJsAlert(WebView view, String url, String message,JsResult result) 
    {
        Log.e("alert triggered", message);
        return false;         
    }
});
webView.loadUrl("http://mypage/mypage.html");

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

ОБНОВЛЕНИЕ1: Я проверял ваш код на вкладке Samsung Galaxy.Я изменил

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

строку.Страница загружена, я вижу контент с картинкой.Итак ... код работает как положено.Я заметил, что иногда содержимое отображается не так, как должно быть.Это говорит о том, что проблема заключается в масштабировании:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />

, а вычисление внутри $ (document) .ready () неверно!

Кстати ... то, что вы ищете, этоViewPager with WebViews.

UPDATE2: обратите внимание также, что при загрузке веб-страницы как файла: /// файлы JS должны находиться в одном каталоге (без внешних URL-адресов).

Answer 3

Я столкнулся с той же проблемой довольно давно - мое окончательное решение было отказаться от jquery и просто использовать простой JS. Вещи постоянно ломались, пока работали нормально при просмотре с обычного Android-браузера.

Если это единственные строки, которые нарушают код, попробуйте воспроизвести те же функции этих строк с помощью чистого JS. Родное веб-представление Android имеет довольно хорошую поддержку для всех последних новинок JS,

так ...

$('body').css({height : height+'px', width : Math.floor(width*0.98)+'px' });
$('.text').css({height : height+'px', width : Math.floor(width*0.98)+'px' }); 
$('#firstpage').css({height : height+'px', width : Math.floor(width*0.98)+'px' }); 
$('body').prepend('<style>.text{-moz-column-count:'+numCols+';-webkit-column-count:'+numCols+';}</style>'); 

будет ...

var doc = document,
    body = doc.getElementsByTagName('body')[0],
    bodyStyle = body.style,
    firstPage = doc.getElementById('firstpage'),
    firstPageStyle = firstPage.style,

    head = doc.getElementsByTagName('head')[0],
    style = doc.createElement('style'),
    rules = doc.createTextNode('.text{-webkit-column-count:'+numCols+';}');

bodyStyle.height = height + 'px';
bodyStyle.width = Math.floor(width * 0.98) + 'px';

firstPageStyle.height = height + 'px';
bodyStyle.width = Math.floor(width * 0.98) + 'px';

style.type = 'text/css';

if( style.styleSheet )
    style.styleSheet.cssText = rules.nodeValue;
else 
    style.appendChild( rules );

head.appendChild( style );

Просто убедитесь, что приведенный выше код выполняется после загрузки всех используемых элементов (после состояния готовности DOM или до закрытия тега)

пс. Кроме того, поскольку вы используете webkit для Android - зачем нужен -moz-column-count?

Answer 4

Я не совсем уверен, является ли это причиной вашей проблемы, но вы должны звонить loadUrl после , когда вы установили WebView

Редактировать

Если это не проблема, вы можете написать

• простейшего SSCCE , который, по вашему мнению, не работает, но который вы считаете нужным
• марка / модель вашего устройства и версия Android, с которой вы работаете