2012-02-29 15 views
15

Mi aplicación utiliza un WebView con fondo transparente en el que JavaScript modifica algunas propiedades de los elementos.Android WebView no se actualizó después de que el contenido de la vista web haya sido modificado por JavaScript

El problema: WebView no se actualiza de acuerdo con las propiedades modificadas. Cuando se vuelve a dibujar WebView (p. Ej., Debido a un cambio en la orientación del usuario), el WebView se actualiza correctamente. He reproducido el problema en Android 3.2 (en Samsung GT) pero en Android 2.1 y 4.3 todo funciona bien.

Un código de muestra que reproduce el problema:
Obviamente, cuando se toca la primera imagen, debería desaparecer, y toque la segunda para moverla. Si el color de fondo del WebView se cambia para ser opaco, o si elimino la imagen que se muestra debajo del WebView, todo funciona bien ...

HTML cargado por la vista web. :

<!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> 

Archivo de diseño:

<?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> 

Aplicación Activity: Tiro

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"); 
    } 
} 

pantalla antes de grifo:

Screen shot before tap
Screen shot after tap on both images

+1

Sus enlaces de captura de pantalla están rotos (permiso denegado). –

+0

Disculpe por eso ... Los enlaces deberían funcionar ahora – hailrok

+0

No hay necesidad de disculparse, simplemente diciéndoles lo notan. :) –

Respuesta

0

Me encontré con un problema similar. El problema surge porque debe guardar el estado de su WebView durante un cambio de orientación. Sin hacerlo, la página web se trata como si se estuviera cargando por primera vez. Eso significa que los cambios que se aplicaron dinámicamente con JavaScript se pierden por completo.

La forma preferida/correcta:
Dependiendo de la complejidad de su web, esto puede tomar un poco de trabajo ya que no hay construido en forma de hacerlo. Debe controlar manualmente qué cambios dinámicos deben guardarse dentro del propio JavaScript. Una vista de alto nivel de los pasos a seguir:

  1. de Actividad onSaveInstanceState() invoca una función de JavaScript, por ejemplo, saveState()
  2. saveState() registra la información necesaria para el almacenamiento DOM, p. localStorage.
  3. La actividad onRestoreInstanceState() invoca una función de JavaScript, IE restoreState()
  4. restoreState() carga información del almacenamiento DOM y actualiza la página web al estado original.

La forma desacertada pero fácil:
anular su actividad configChanges dentro del manifiesto. Eso evitará que la actividad se vuelva a crear y, por lo tanto, la página web no se debe volver a cargar.

Lectura adicional:
Information about recreating an Activity from saved state
Pros/Cons to overriding configChanges

0

intente recargar manualmente vistas web: - web.reload()

0

Haga un método para actualizar vistaweb ex void refreshWebview(WebView webView) { webView.reload(); }

llama a refreshWebview() desde tu javaScript o desde cualquier lugar desde tu código usando la interfaz.

Cuestiones relacionadas