{"id":1640,"date":"2016-07-22T16:39:00","date_gmt":"2016-07-22T08:39:00","guid":{"rendered":"https:\/\/ai.zhousir.top\/?p=1640"},"modified":"2026-08-18T12:58:50","modified_gmt":"2026-08-18T04:58:50","slug":"android-webview-%e7%9b%b8%e5%85%b3%e7%9f%a5%e8%af%86","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=1640","title":{"rendered":"Android WebView \u76f8\u5173\u77e5\u8bc6"},"content":{"rendered":"
\n
\n

WebView \u7528\u6765\u663e\u793a HTML\uff0c\u5bf9 HTML5 \u4e5f\u53cb\u597d\uff0c\u63a5\u8fd1 iOS \u7684 UIWebView\u3002\u5b83\u4e0d\u9700\u8981<\/strong>\u4ec5\u4ec5\u56e0\u4e3a\u300c\u7528\u4e86 WebView\u300d\u5c31\u7533\u8bf7\u7f51\u7edc\u6743\u9650\uff1a\u53ea\u6709\u771f\u6b63\u8bbf\u95ee\u7f51\u7edc\u624d\u4f1a\u62a5 Web page not available\uff1b\u52a0\u8f7d assets \u6216 HTML \u5b57\u7b26\u4e32\uff0c\u6ca1\u6709 INTERNET \u4e5f\u4e0d\u4f1a\u9519\u3002<\/p>\n<\/blockquote>\n

\n

\u4e00\u3001WebView \u57fa\u7840\u4f7f\u7528<\/span><\/h2>\n

1. \u5e03\u5c40\u4e0e Settings<\/h3>\n

xml \u4e2d\uff1a<\/p>\n

<\/section>\n
<WebView\n    android:id=\"@+id\/blog_detail_webview\"\n    android:layout_width=\"fill_parent\"\n    android:layout_height=\"wrap_content\"\n    android:background=\"#FFFFFF\"\/><\/code><\/pre>\n
Activity \u4e2d\u5c5e\u6027\u4e0d\u8d70 xml\uff0c\u800c\u662f getSettings()<\/code>\uff1a<\/p>\n
<\/section>\n
mWebView = (WebView)findViewById(R.id.blog_detail_webview);\nmWebView.getSettings().setJavaScriptEnabled(false);\nmWebView.getSettings().setSupportZoom(false);\nmWebView.getSettings().setBuiltInZoomControls(false);\nmWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);\nmWebView.getSettings().setDefaultFontSize(18);<\/code><\/pre>\n
    \n
  • \n
    setJavaScriptEnabled(false)<\/code>\uff1a\u4e0d\u652f\u6301 JS\u3002\u8981 Java \u548c JS \u4ea4\u4e92\uff0c\u6216\u9875\u9762\u672c\u8eab\u4f9d\u8d56 JS\uff0c\u6539\u6210 true\u3002<\/section>\n<\/li>\n
  • \n
    setSupportZoom(false)<\/code>\uff1a\u662f\u5426\u652f\u6301\u7f29\u653e\uff0c\u9ed8\u8ba4 true\u3002<\/section>\n<\/li>\n
  • \n
    setBuiltInZoomControls(false)<\/code>\uff1a\u662f\u5426\u663e\u793a\u7f29\u653e\u63a7\u4ef6\uff0c\u9ed8\u8ba4 false\u3002<\/section>\n<\/li>\n
  • \n
    setDefaultFontSize(18)<\/code>\uff1a\u9ed8\u8ba4\u5b57\u4f53\uff0c\u9ed8\u8ba4 16\uff0c\u6709\u6548\u533a\u95f4 1\u201372\u3002<\/section>\n<\/li>\n<\/ul>\n
    setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN)<\/code> \u4e0d\u5e38\u7528\u3002\u666e\u901a\u7f51\u9875\u5e38\u51fa\u73b0\u6a2a\u5411\u6eda\u52a8\u6761\uff0c\u9605\u8bfb\u5f88\u522b\u626d\u3002LayoutAlgorithm<\/code> \u63a7\u5236 HTML \u5e03\u5c40\uff0c\u4e09\u79cd\uff1a<\/p>\n\n\n\n\n\n\n\n
    \u53d6\u503c<\/th>\n\u6548\u679c<\/th>\n<\/tr>\n<\/thead>\n
    NORMAL<\/code><\/td>\n\u6b63\u5e38\u663e\u793a\uff0c\u6ca1\u6709\u6e32\u67d3\u53d8\u5316<\/td>\n<\/tr>\n
    SINGLE_COLUMN<\/code><\/td>\n\u628a\u6240\u6709\u5185\u5bb9\u653e\u5230\u4e0e WebView \u7b49\u5bbd\u7684\u4e00\u5217<\/td>\n<\/tr>\n
    NARROW_COLUMNS<\/code><\/td>\n\u53ef\u80fd\u7684\u8bdd\uff0c\u5217\u5bbd\u4e0d\u8d85\u8fc7\u5c4f\u5e55\u5bbd\u5ea6<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
    2. \u52a0\u8f7d\u5185\u5bb9<\/h3>\n
    \uff081\uff09\u52a0\u8f7d assets \u91cc\u7684\u672c\u5730\u7f51\u9875\uff0c\u5f62\u5982\uff1a<\/p>\n
    <\/section>\n
    mWebView.loadUrl(\"file:\/\/\/android_asset\/html\/test1.html\");<\/code><\/pre>\n
    \uff082\uff09\u52a0\u8f7d\u8fdc\u7a0b\u7f51\u9875\uff1a<\/p>\n
    <\/section>\n
    mWebView.loadUrl(\"http:\/\/www.google.com\");<\/code><\/pre>\n
    \uff083\uff09\u7247\u6bb5\u800c\u4e0d\u662f\u5b8c\u6574\u7f51\u9875\u65f6\uff0c\u7528 loadData<\/code> \u6216\u66f4\u5e38\u7528\u7684 loadDataWithBaseURL<\/code>\u3002\u5b8c\u6574\u7ad9\u70b9\u76f4\u63a5\u7528\u6d4f\u89c8\u5668\u5373\u53ef\uff0c\u4e0d\u5fc5\u505a\u6210\u5e94\u7528\u3002<\/p>\n
    <\/section>\n
    void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl)\n\nloadDataWithBaseURL()\u6bd4loadData()\u591a\u4e24\u4e2a\u53c2\u6570\uff0c\u53ef\u4ee5\u6307\u5b9aHTML\u4ee3\u7801\u7247\u6bb5\u4e2d\u76f8\u5173\u8d44\u6e90\u7684\u76f8\u5bf9\u6839\u8def\u5f84\uff0c\u4e5f\u53ef\u4ee5\u6307\u5b9a\u5386\u53f2Url\uff0c\u5176\u4f59\u4e09\u4e2a\u53c2\u6570\u76f8\u540c\u3002<\/code><\/pre>\n
    baseUrl<\/code> \u6307\u5b9a data \u91cc\u8d85\u94fe\u63a5\u3001\u56fe\u7247\u76f8\u5bf9\u8def\u5f84\u7684\u57fa\u51c6\u3002\u5f88\u591a\u7ad9\u70b9\u7528\u76f8\u5bf9\u5730\u5740\uff0c\u6ca1\u6709 baseUrl \u5c31\u52a0\u8f7d\u4e0d\u5230\u8d44\u6e90\u3002<\/p>\n
    \u4f8b\u5b50\uff08\u76f8\u5bf9\u8def\u5f84\u56fe\u7247\uff0c\u5fc5\u987b\u5e26\u4e0a\u7ad9\u70b9\u6839\uff09\uff1a<\/p>\n
    <\/section>\n
    String body =\"\u793a\u4f8b\uff1a\u8fd9\u91cc\u6709\u4e2aimg\u6807\u7b7e\uff0c\u5730\u5740\u662f\u76f8\u5bf9\u8def\u5f84<img src='\/uploads\/allimg\/130923\/1FP02V7-0.png' \/>\";\nmWebView.loadDataWithBaseURL(\"http:\/\/www.jcodecraeer.com\", body, \"text\/html\", \"utf-8\",null);<\/code><\/pre>\n
    baseUrl \u82e5\u4e0d\u6307\u5b9a\u4e3a http:\/\/www.jcodecraeer.com\uff0c\u8fd9\u5f20\u56fe\u5c31\u663e\u793a\u4e0d\u51fa\u6765\u3002<\/p>\n
    \u4e5f\u53ef\u4ee5\u5148\u628a assets \u6587\u4ef6\u8bfb\u6210\u5b57\u7b26\u4e32\u518d loadData\uff1a<\/p>\n
    <\/section>\n
    String data = \"\";\ntry {\n    \/\/ \u8bfb\u53d6assets\u76ee\u5f55\u4e0b\u7684\u6587\u4ef6\u9700\u8981\u7528\u5230AssetManager\u5bf9\u8c61\u7684Open\u65b9\u6cd5\u6253\u5f00\u6587\u4ef6\n    InputStream is = getAssets().open(\"html\/test2.html\");\n    \/\/ loadData()\u65b9\u6cd5\u9700\u8981\u7684\u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\u6570\u636e\u6240\u4ee5\u6211\u4eec\u9700\u8981\u628a\u6587\u4ef6\u8f6c\u6210\u5b57\u7b26\u4e32\n    ByteArrayBuffer baf = new ByteArrayBuffer(500);\n    int count = 0;\n    while ((count = is.read()) != -1) {\n        baf.append(count);\n    }\n    data = EncodingUtils.getString(baf.toByteArray(), \"utf-8\");\n} catch (IOException e) {\n    e.printStackTrace();\n}\n\n\/\/ \u4e0b\u9762\u4e24\u79cd\u65b9\u6cd5\u90fd\u53ef\u4ee5\u52a0\u8f7d\u6210\u529f\nmWebView.loadData(data, \"text\/html\", \"utf-8\");\n\/\/ wv.loadDataWithBaseURL(\"\", data, \"text\/html\", \"utf-8\", \"\");<\/code><\/pre>\n
    \u8fd9\u548c loadUrl(\"file:\/\/\/android_asset\/html\/test1.html\")<\/code> \u6548\u679c\u63a5\u8fd1\uff0c\u4f46 loadData \u6ca1\u6709\u57fa\u51c6 URL\uff0c\u6587\u4ef6\u91cc\u7684\u8d44\u6e90\u6216\u94fe\u63a5\u4f1a\u5931\u6548\u3002<\/p>\n
    loadData()<\/code> \u7684 HTML \u4e0d\u80fd\u5305\u542b #<\/code>\u3001%<\/code>\u3001\\<\/code>\u3001?<\/code> \u56db\u79cd\u7279\u6b8a\u5b57\u7b26\u3002\u5e73\u65f6\u53ef\u80fd\u78b0\u5de7\u4e0d\u51fa\u95ee\u9898\uff0c\u51fa\u95ee\u9898\u65f6\u518d\u66ff\u6362\u3002<\/p>\n
      \n
    • \n
      %<\/code>\uff1a\u4f1a\u62a5\u627e\u4e0d\u5230\u9875\u9762\uff0c\u6574\u9875\u4e71\u7801\u3002<\/section>\n<\/li>\n
    • \n
      #<\/code>\uff1a\u4f1a\u8ba9 goBack<\/code> \u5931\u6548\uff0c\u4f46 canGoBack<\/code> \u4ecd\u4e3a true\uff0c\u4e8e\u662f\u8fd4\u56de\u6309\u94ae\u4eae\u7740\u5374\u56de\u4e0d\u53bb\u3002<\/section>\n<\/li>\n<\/ul>\n
      3. \u5185\u5bb9\u5904\u7406\u4e0e\u6eda\u52a8\u6761<\/h3>\n
      WebView \u4e0a padding \u51e0\u4e4e\u4e0d\u8d77\u4f5c\u7528\uff0c\u5185\u5bb9\u4ecd\u8d34\u8fb9\uff0c\u53cd\u800c\u4f1a\u632a\u6eda\u52a8\u6761\u3002\u8fd9\u662f\u63a7\u4ef6\u95ee\u9898\u3002\u5916\u5305\u4e00\u5c42 layout \u53ea\u80fd\u6539\u5584\u4e00\u70b9\u3002\u6b63\u786e\u505a\u6cd5\u662f\u5728\u52a0\u8f7d\u7684 CSS \u91cc\u52a0 padding\uff0c\u4e0d\u5fc5\u4e3a\u8fd9\u70b9\u7a7a\u767d\u6539 xml\u3002<\/p>\n
      \u91cd\u5199 shouldOverrideUrlLoading<\/code> \u65f6\u53ef\u4ee5\u9650\u5b9a\uff1a\u53ea\u6709 URL \u5305\u542b eoe.cn \u624d\u5728 WebView \u6253\u5f00\uff0c\u5426\u5219\u8d70\u7cfb\u7edf\u6d4f\u89c8\u5668\uff1a<\/p>\n
      <\/section>\n
      @Override\npublic boolean shouldOverrideUrlLoading(WebView view, String url) {\n    LogUtil.i(this, \"url=\" + url);\n    if ( url.contains(\"eoe.cn\") == true){\n        view.loadUrl(url);\n        return true;\n    }else{\n        Intent in = new Intent (Intent.ACTION_VIEW , Uri.parse(url));\n        startActivity(in);\n        return true;\n    }\n}<\/code><\/pre>\n
      android:scrollbarStyle<\/code> \u63a7\u5236\u6eda\u52a8\u6761\u4f4d\u7f6e\uff1aSCROLLBARS_INSIDE_OVERLAY<\/code> \u50cf CSS padding\uff0c\u6761\u5b50\u5728 page \u91cc\uff1bOUTSIDE_OVERLAY<\/code> \u5728\u5916\u4fa7\u3002<\/p>\n
      <\/section>\n
      mWebView.setScrollBarStyle(View.SCROLLBARS_OUTSIDE_OVERLAY);\nmWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);<\/code><\/pre>\n
      \n
      \u4e8c\u3001WebView \u548c JavaScript \u4ea4\u4e92<\/span><\/h2>\n
      \u5206\u4e24\u79cd\uff1aJS \u8c03 Android\uff1bAndroid \u8c03 JS\u3002<\/p>\n
      \u7b2c\u4e00\u79cd\uff1aJS \u8c03\u7528 Android<\/h3>\n
      \u5173\u952e\u4e09\u6b65\uff1a<\/p>\n
        \n
      1. \n
        \u6253\u5f00 JS\uff1amWebView.getSettings().setJavaScriptEnabled(true);<\/code><\/section>\n<\/li>\n
      2. \n
        \u5b9e\u73b0\u4ea4\u4e92\u63a5\u53e3\u3002<\/section>\n<\/li>\n
      3. \n
        \u628a\u63a5\u53e3\u5b9e\u4f8b addJavascriptInterface<\/code> \u5230 WebView\uff08\u5173\u952e\uff09\u3002<\/section>\n<\/li>\n<\/ol>\n
        <\/section>\n
        interface MyJavaScriptInterface {\n     void nativeMethod();\n}\nMyJavaScriptInterface myJavaScriptInterface = new MyJavaScriptInterface() {\n   @Override\n   public void nativeMethod() {\n      Toast.makeText(WebViewActivity.this,\"\u5bf9\u8bdd\u6846\",Toast.LENGTH_SHORT).show();\n   }\n\n};<\/code><\/pre>\n
        <\/section>\n
        \/**\n* WebView.addJavascriptInterface(Object,String)\u65b9\u6cd5\n* Object \u4ea4\u4e92\u63a5\u53e3\u5bf9\u8c61\n* String \u4ea4\u4e92\u63a5\u53e3\u540d\u79f0\n*\/\nmWebView.addJavascriptInterface(myJavaScriptInterface, \"MyJavaScriptInterface\");<\/code><\/pre>\n
        HTML \u91cc\u901a\u8fc7 window.\u63a5\u53e3\u540d.\u65b9\u6cd5\u540d \u8c03\u7528\uff1a<\/p>\n
        <\/section>\n
        <html>\n<head>\n    <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\"\/>\n    <title>\u8868\u5355<\/title>\n    <script>\n                \/\/window:\u6d4f\u89c8\u5668\u7a97\u53e3\u5bf9\u8c61\n\t\t\/\/MyJavaScriptInterface\uff1ajs\u4e0e\u539f\u751fandroid\u5e94\u7528\u4ea4\u4e92\u7684\u63a5\u53e3\u540d\n\t\t\/\/showToast: js\u4e0e\u539f\u751fandroid\u5e94\u7528\u4ea4\u4e92\u7684\u63a5\u53e3\u7684\u65b9\u6cd5\u540d\n\t\tfunction toNativeFunction()\n\t        {\n\t\t\twindow.MyJavaScriptInterface.nativeMethod();\n\t        }\n\n    <\/script>\n  <\/head>\n\n   <body>\n    <button onclick=\"toNativeFunction()\">\u6267\u884c\u8df3\u8f6c<\/button>\n   <\/body>\n<\/html><\/code><\/pre>\n
        \u7b2c\u4e8c\u79cd\uff1aAndroid \u8c03\u7528 JS<\/h3>\n
        mWebView.loadUrl(\"javascript:testByNative()\");<\/code><\/p>\n
        \u9875\u9762\u5b9e\u73b0 testByNative<\/code>\uff1a<\/p>\n
        <\/section>\n
          <script>\n\t     function testByNative(){\n\t\twindow.location.href = \"https:\/\/ai.zhousir.top\"; \/\/\u8df3\u8f6c\u5230\u6307\u5b9aurl\n\t     }\n\n    <\/script><\/code><\/pre>\n
        \n
        \u4e09\u3001WebView \u9875\u9762\u52a0\u8f7d\u6548\u679c<\/span><\/h2>\n
        WebViewClient<\/code> \u7ba1\u5f00\u59cb\/\u7ed3\u675f\u548c URL \u62e6\u622a\uff1bWebChromeClient.onProgressChanged<\/code> \u7ba1\u8fdb\u5ea6\u6761\u3002<\/p>\n
        <\/section>\n
         public void setWebVieClient(){\n        mWebView.setWebViewClient(new WebViewClient(){\n            \/**\n             * \u8bf7\u6c42\u7684url\u5d4c\u5165webview\u663e\u793a\n             *\/\n            @Override\n            public boolean shouldOverrideUrlLoading(WebView webview, String url) {\n                webview.loadUrl(url);\n                return true;\n            }\n\n            \/**\n             * \u52a0\u8f7dweb\u9875\u9762\u8c03\u7528\n             * @param view\n             * @param url\n             * @param favicon\n             *\/\n            @Override\n            public void onPageStarted(WebView view, String url, Bitmap favicon) {\n                super.onPageStarted(view, url, favicon);\n                mLoadTxt.setText(\"\u6b63\u5728\u52a0\u8f7d\u4e2d.....\");\n            }\n\n            \/**\n             * web\u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u8c03\u7528\n             * @param view\n             * @param url\n             *\/\n            @Override\n            public void onPageFinished(WebView view, String url) {\n                super.onPageFinished(view, url);\n                mLoadTxt.setText(\"\u52a0\u8f7d\u5b8c\u6210\");\n            }\n\n        });\n\n        mWebView.setWebChromeClient(new WebChromeClient(){\n            \/**\n             * web\u9875\u9762\u52a0\u8f7d\u8fdb\u5ea6\u8f6c\u53d8\u8c03\u7528\n             * @param view\n             * @param newProgress\n             *\/\n            @Override\n            public void onProgressChanged(WebView view, int newProgress) {\n                super.onProgressChanged(view, newProgress);\n                Logs.e(\"onProgressChanged :\"+newProgress);\n                mLoadingSeekBar.setProgress(newProgress);\n            }\n        });\n\n    }<\/code><\/pre>\n
        \u7269\u7406\u8fd4\u56de\u952e\u4f18\u5148\u5728 WebView \u5386\u53f2\u91cc\u56de\u9000\uff1a<\/p>\n
        <\/section>\n
        @Override\n\/**\n*\u5d4c\u5165\u7f51\u9875\u56de\u9000\u64cd\u4f5c\n*\/\npublic boolean onKeyDown(int keyCode, KeyEvent event) {\n    if(keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {\n        mWebView.goBack();\/\/ \u8fd4\u56de\u524d\u4e00\u4e2a\u9875\u9762\n        return true;\n    }\n    return super.onKeyDown(keyCode, event);\n}<\/code><\/pre>\n
        \n
        \u56db\u3001WebView \u7f13\u5b58\u76f8\u5173<\/span><\/h2>\n
        \u52a0\u8f7d HTML \u65f6\uff0c\u4f1a\u5728 data\/\u5e94\u7528 package \u4e0b\u751f\u6210 database \u4e0e cache\uff1a\u8bf7\u6c42\u8fc7\u7684 URL \u8bb0\u5728 webviewCache.db\uff0c\u5185\u5bb9\u5728 webviewCache \u6587\u4ef6\u5939\u3002WebView \u6709\u4e24\u7c7b\u7f13\u5b58\uff1a\u7f51\u9875\u6570\u636e\u7f13\u5b58\uff08\u6253\u5f00\u8fc7\u7684\u9875\u9762\u53ca\u8d44\u6e90\uff09\u3001H5 \u7f13\u5b58\uff08AppCache\uff09\u3002<\/p>\n
        \u7f51\u9875\u7f13\u5b58\u6784\u6210<\/h3>\n