2012-02-29 13 views
15

La mia applicazione utilizza uno WebView con sfondo trasparente in cui alcune proprietà di stile degli elementi vengono modificate da JavaScript.Android WebView non aggiornato dopo che il contenuto della visualizzazione Web è stato modificato da JavaScript

Il problema: WebView non viene aggiornato in base alle proprietà modificate. Quando WebView viene ridisegnato (ad es. A causa del cambiamento di orientamento dell'utente) lo WebView viene aggiornato correttamente. Ho riprodotto il problema su Android 3.2 (su Samsung GT) ma su Android 2.1 e 4.3 funziona tutto bene.

Un esempio di codice che riproduce il problema:
Ovviamente quando la prima immagine viene toccata, dovrebbe sparire e toccare la seconda dovrebbe spostarla. Se il colore di sfondo di WebView viene modificato in modo da risultare opaco o se rimuovo l'immagine visualizzata sotto WebView, tutto funziona correttamente ...

HTML caricato dalla visualizzazione Web. : File

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

Disposizione:

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

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

Screen shot prima del rubinetto:

Screen shot before tap
Screen shot after tap on both images

+1

I tuoi collegamenti di schermate sono interrotti (permesso negato). –

+0

Ci scusiamo per questo ... I collegamenti dovrebbero funzionare ora – hailrok

+0

Non c'è bisogno di scusarsi, solo di averlo detto così. :) –

risposta

0

Mi sono imbattuto in un problema simile. Il problema sorge perché devi salvare lo stato del tuo WebView durante un cambio di orientamento. Senza fare ciò, la pagina web viene trattata come se si caricasse per la prima volta. Ciò significa che tutte le modifiche applicate in modo dinamico con JavaScript sono completamente perse.

Il preferito/modo corretto:
A seconda della complessità del web, questo potrebbe richiedere un po 'di lavoro dal momento che non c'è costruito in modo per farlo. È necessario gestire manualmente le modifiche dinamiche che devono essere salvate all'interno di JavaScript. Una visualizzazione di alto livello dei passaggi da intraprendere:

  1. L'attività onSaveInstanceState() richiama una funzione JavaScript, ad es. saveState()
  2. saveState() registra le informazioni necessarie sull'archivio DOM, ad es. localStorage.
  3. L'attività onRestoreInstanceState() invoca una funzione JavaScript, IE restoreState()
  4. restoreState() carica le informazioni dalla memoria DOM e aggiorna la pagina Web allo stato originale.

Il modo mal consigliato ma facile:
ignorare l'attività configChanges all'interno del manifesto. Ciò impedirà la ricreazione dell'attività e quindi la pagina web non dovrebbe essere ricaricata.

Letture consigliate:
Information about recreating an Activity from saved state
Pros/Cons to overriding configChanges

0

provare ricaricare manualmente WebView: - web.reload()

0

Fai un metodo per aggiornare WebView ex void refreshWebview(WebView webView) { webView.reload(); }

chiama refreshWebview() da javaScript o da qualsiasi parte del codice usando l'interfaccia.

Problemi correlati