Menu
My application uses a WebView with transparent background in which some styling properties of the elements are modified by JavaScript.
The problem: WebView is not refreshed according to the modified properties. When WebView is redrawn (e.g., due to user orientation change) the WebView is updated correctly.
I reproduced the problem on Android 3.2 (on Samsung GT) but on Android 2.1 and 4.3 all works fine.
A sample code that reproduces the problem:
Obviously when the first image is tapped it should disappear, and tap on the second one should move it. If the background color of the WebView is changed to be opaque, or if I remove the image displayed below the WebView all works fine...
HTML loaded by the web view. :
<!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>
Layout File:
<?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>
Application 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 before tap:
Screen shot before tap
Screen shot after tap on both images
943
I ran into a similar issue. The problem arises because you must save the state of your WebView during an orientation change. Without doing so, the webpage is treated as if loading for the very first time. That means any changes that were applied dynamically with JavaScript are completely lost.
The preferred/correct way:
Depending on the complexity of your web, this may take a little work since there's no built in way to do so. You must manually handle what dynamic changes need to be saved within JavaScript itself. A high level view of the steps to take:
onSaveInstanceState() invokes a JavaScript function, e.g. saveState()localStorage.onRestoreInstanceState() invokes a JavaScript function, IE restoreState()The ill advised but easy way:
Override your activities configChanges within the manifest. That'll prevent the activity from being recreated and hence the webpage should not reload.
Further Reading:
Information about recreating an Activity from saved state
Pros/Cons to overriding configChanges
174
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
