Android WebView не обновляется после того, как содержимое веб-сайта было изменено с помощью JavaScript
В моем приложении используется WebView
с прозрачным фоном, в котором некоторые свойства стиля элементов изменяются JavaScript.
Проблема: WebView
не обновляется в соответствии с измененными свойствами. Когда WebView
перерисовывается (например, из-за изменения ориентации пользователя), WebView
обновляется правильно.
Я воспроизвел проблему на Android 3.2 (на Samsung GT), но на Android 2.1 и 4.3 все работает нормально.
Пример кода, который воспроизводит проблему:
Очевидно, когда первое изображение постукивается, оно должно исчезнуть, а второе - переместить его. Если цвет фона WebView
изменен, чтобы быть непрозрачным, или если я удаляю изображение, отображаемое под WebView
, все работает отлично...
HTML, загруженный веб-представлением.:
<!DOCTYPE html>
<html>
<body >
<img style="position:absolute;left:0px" onclick="this.style.display='none';"
src="http://flv.justad.tv/gallery/assets/trickplay/justad/tp-pause.png" />
<img style="position:absolute;left:200px" onclick="this.style.top='200px';"
src="http://flv.justad.tv/gallery/assets/trickplay/justad/tp-ff.png" />
</body>
</html>
Файл макета:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:src="@drawable/display_background" />
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/WebviewContainer">
</RelativeLayout>
</RelativeLayout>
Приложение Activity
:
public class TestImageMoveActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
RelativeLayout webviewContainer =
(RelativeLayout)findViewById(R.id.WebviewContainer);
WebView web = new WebView(this);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
web.setLayoutParams(
new LayoutParams(LayoutParams.FILL_PARENT,LayoutParams.FILL_PARENT));
web.setBackgroundColor(Color.TRANSPARENT);
webviewContainer.addView(web);
web.loadUrl("http://192.168.1.12/myWeb/localTmp/testImageMove.html");
}
}
Снимок экрана перед нажатием:
Снимок экрана перед нажатием
Снимок экрана после нажатия на оба изображения
Ответы
Ответ 1
У меня возникла аналогичная проблема. Проблема возникает из-за сохранения состояния вашего WebView
во время изменения ориентации. Без этого веб-страница рассматривается как загружаемая в первый раз. Это означает, что любые изменения, которые были применены динамически с JavaScript, полностью потеряны.
Предпочтительный/правильный способ:
В зависимости от сложности вашей сети это может занять небольшую работу, поскольку нет встроенного способа сделать это. Вы должны вручную обработать, какие динамические изменения необходимо сохранить в самом JavaScript. Высокий уровень представления шагов:
- Действие
onSaveInstanceState()
вызывает функцию JavaScript, например. saveState()
- saveState() записывает необходимую информацию в хранилище DOM, например.
localStorage
.
- Активность
onRestoreInstanceState()
вызывает функцию JavaScript, IE restoreState()
- restoreState() загружает информацию из хранилища DOM и обновляет веб-страницу до исходного состояния.
Недобросовестный, но простой способ:
Переопределите действия configChanges
в манифесте. Это предотвратит воссоздание активности и, следовательно, веб-страницу не перезагрузится.
Дальнейшее чтение:
Информация о воссоздании активности из сохраненного состояния
Плюсы/минусы к переопределению конфигурационных изменений
Ответ 2
попробуйте вручную перезагрузить webview: -
web.reload()
Ответ 3
Сделать метод обновления webview бывший
void refreshWebview(WebView webView)
{
webView.reload();
}
вызвать refreshWebview() с вашего javaScript или где-нибудь из вашего кода с помощью интерфейса.