JavaScript 修改 webview 内容后，Android WebView 不刷新答案

【问题标题】：Android WebView not refreshed after webview content has been modified by JavaScriptJavaScript 修改 webview 内容后，Android WebView 不刷新
【发布时间】：2012-03-19 00:20:38
【问题描述】：

我的应用程序使用带有透明背景的WebView，其中元素的一些样式属性由 JavaScript 修改。

问题：WebView没有根据修改后的属性刷新。当WebView 被重绘时（例如，由于用户方向改变）WebView 被正确更新。我在 Android 3.2（三星 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");
    }
}

点击前的屏幕截图：

Screen shot before tap
Screen shot after tap on both images

【问题讨论】：

您的屏幕截图链接已损坏（权限被拒绝）。
抱歉...链接现在应该可以使用了
不用道歉，只是说你注意到了。 :)
看看这个链接它会给你一些想法stackoverflow.com/questions/2563325/…

标签： android android-widget android-webview

【解决方案1】：

我遇到了类似的问题。出现问题是因为您必须在方向更改期间保存 WebView 的状态。如果不这样做，网页将被视为第一次加载。这意味着使用 JavaScript 动态应用的任何更改都将完全丢失。

首选/正确方式：
根据您的网络的复杂性，这可能需要一些工作，因为没有内置的方法可以这样做。您必须手动处理需要在 JavaScript 本身中保存的动态更改。要采取的步骤的高级视图：

Activity 的 onSaveInstanceState() 调用 JavaScript 函数，例如保存状态（）
saveState() 将必要的信息记录到 DOM 存储中，例如localStorage。
Activity 的 onRestoreInstanceState() 调用一个 JavaScript 函数，即 IE restoreState()
restoreState() 从 DOM 存储中加载信息并将网页更新为原始状态。

不明智但简单的方法：
在清单中覆盖您的活动configChanges。这将阻止重新创建活动，因此不应重新加载网页。

进一步阅读：
Information about recreating an Activity from saved state
Pros/Cons to overriding configChanges

【讨论】：

【解决方案2】：

制作刷新webview的方法前任 void refreshWebview(WebView webView) { webView.reload(); }

从您的 javaScript 或使用接口的代码中的任何位置调用 refreshWebview()。

【讨论】：

【解决方案3】：

尝试手动重新加载 webview:- web.reload()

【讨论】：