(С использованием Samsung Galaxy Tab и Android 3.0, это предназначено для работы на каждом 3,0 + планшете, как в браузерах, а не в веб-браузере)
У меня есть страница с CSS и jQuery, которая загружается в браузерах, браузерах и iOS-устройствах, но андроид webview отказывается загружать их последовательно.
Я сузил проблему, просто пропустив javascript при загрузке (путем репликации проблемы с некоторыми демонстрационными приложениями javascript для веб-просмотра). Почему это?
ЗДЕСЬ ПОЛНЫЙ ТЕСТОВОЙ КОД 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 действительно не является IE6 мобильной разработки.
Дополнительные факты:
Если вы удалите теги <script>
которые содержат весь Jquery, страница быстро загружается со всем форматированием CSS. Как только JQuery добавлен, ничего не загружается вообще.
Я также нашел несколько других вопросов, которые сталкиваются с одной и той же проблемой, многие остаются без ответа или не имеют окончательного ответа на то, что ищет OP 🙁
См.: 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 Browser загружает его в порядке
Android-приложение Android не может обрабатывать javascript?
предложения? Позволяет дойти до сути! В документации по Android говорится, что веб-просмотр имеет ограничения, но я не знаю, где это ограничение, поскольку люди постоянно делают HTML CSS JS-приложения!
У меня также есть 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");
Я надеюсь, что это помогает.
UPDATE1: Я проверил ваш код на вкладке 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 () ложно!
Btw … то, что вы ищете, – это ViewPager с WebViews.
UPDATE2: обратите внимание также на загрузку веб-страницы как файла: /// у вас должны быть JS-файлы в одном каталоге (без внешних URL-адресов).
Ответ заключается в том, что javascript должен быть в функциях в разделах HTML-страницы <script>
а затем должен быть инъецирован webview.loadUrl("javascript:yourJavascriptFunction()") after webview.setWebviewClient(new WebviewClient(){ public void onPageFinishedLoading(){ ...//js injections here });
Я столкнулся с той же проблемой довольно давно – моим окончательным решением было дрейф 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 или до закрытия тега)
пс. Кроме того, поскольку вы используете Android-приложение Android – зачем нужен -moz-column-count?
Я не совсем уверен, что это причина вашей проблемы, но вы должны вызвать loadUrl
после настройки WebView
редактировать
Если это не проблема, вы можете рассмотреть публикацию