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 или где-нибудь из вашего кода с помощью интерфейса.