Android 使用WebView进行JS交互干货总结

JS交互总结

使用原生的webView进行交互

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
mWebView = new WebView(getApplicationContext());
mWebView.setLayoutParams(params);
mLayout.addView(mWebView);

创建webView时为了避免内存泄漏 建议在activity中创建
而且是需要的时候在Activity中创建，并且Context使用 getApplicationgContext()

WebSettings settings = mWebView.getSettings();
//设置允许js交互
settings.setJavaScriptEnabled(true);

//是否可以后退
mWebView.canGoBack();
//后退网页
mWebView.goBack();

//是否可以前进
mWebView.canGoForward();
//前进网页
mWebView.goForward();

// 设置允许JS弹窗
settings.setJavaScriptCanOpenWindowsAutomatically(true);

先介绍一些最常用的属性，接下来我们就要概述js交互的具体方法了

/*
 * 设置与js交互 可以让js调用android
 * window.callAndroid.javaMethod(url)
 * js 调用 Android
 * */
mWebView.addJavascriptInterface(new JSHook(), "callAndroid");

 public class JSHook {
        /*
        * js 调用 Android
        * window.callAndroid.javaMethod(url)
        * */
        @JavascriptInterface
        public void javaMethod(String value) {
            if (!("".equals(value))) {
                Intent intent = new Intent(getContext(), YouZanTestWebActivity.class);
                intent.putExtra("url", value);
                intent.putExtra("title", "商品详情");
                startActivity(intent);
            	}
        }
        @JavascriptInterface
        public void showAndroid(){
            String info = "来自手机内的内容！！！";
            mWebView.loadUrl("javascript:show('"+info+"')");
        }
        @JavascriptInterface
        public String getInfo(){
            return "获取手机内的信息！！";
        }
    }

@JavascriptInterface
这个注解是很重要的 不要忘记加呦
然后js调用Android 只需要调用 window.callAndroid.javaMethod(“value”);
接下来你就可以享受车开在路上那种 enjoy

@RequiresApi(api = Build.VERSION_CODES.KITKAT)
@SuppressLint("SetJavaScriptEnabled")
public void testJS() {
    // Android版本变量
    final int version = Build.VERSION.SDK_INT;
    // 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
    if (version < 18) {
        mWebView.loadUrl("javascript:tt()");
    } else {
        mWebView.evaluateJavascript("javascript:tt()", new ValueCallback() {
            @Override
            public void onReceiveValue(String value) {
                Log.e("webtt",value);
                if("".equals(value)){
                    ToastUtils.show(value);
                }else{
                    Intent intent = new Intent(getContext(), YouZanTestWebActivity.class);
                    intent.putExtra("url", value);
                    intent.putExtra("title", "商品详情");
                    startActivity(intent);
                }
            }
        });
    }
}

这个方法是安卓去调js的方法
Android版本4.4以后支持下面哪种方式的调用
建议两个都写上

public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
        mWebView.goBack();
        return true;
    }
    return super.onKeyDown(keyCode, event);
}

重写这个方法，设置系统返回键可以在web间返回

/*
 * 点击原生的返回按钮
 * 不会退出web页面
 * 而是返回上一个web页面
 * */
case R.id.frm_back_web_turn:
    if ((mWebView.canGoBack())){
        mWebView.goBack();
    }else{
        finish();
    }
    break;

这个判断是我们原生app activity中的返回键的控制
goback判断你是否还有web页面可以返回
若没有关闭此activity
若有web页可以返回 则返回上个web页

那么我们如何获取html页面的title呢
继续开车
有两个方法可以实现获取 title
方法一 ： 在网页加载完成后回调

	/*
        * 加载完成的时候会回调
        * 设置标题为 获取到的web标题
        * */
        @Override
        public void onPageFinished(WebView webView, String s) {
            Log.e("webtt",s);
            super.onPageFinished(webView, s);
            String title = webView.getTitle();
            if (!TextUtils.isEmpty(title)) {
                titleTvWebTurn.setText(title);
            }
        }

方法二 ：实测方法二速度会快一些

mWebView.setWebChromeClient(new WebChromeClient(){
        @Override
        public void onReceivedTitle(WebView view, String title) {
            super.onReceivedTitle(view, title);
            titleTvWebTurn.setText(title);
        }
    });

用完webView 一定不要忘记放生它

/*
    * 先从父容器中溢出webView
    * 然后在销毁webView
    * */
    @Override
    protected void onDestroy() {
        super.onDestroy();
        mLayout.removeView(mWebView);
        mWebView.destroy();
    }

最后在献上所知不多的一些webView的属性，先给可爱的您

   //WebView加载web资源
   mWebView.loadUrl("http://daiba.com");
   /* 设置支持Js,必须设置的,基本大多数网页都涉及js */  
   mWebView.getSettings().setJavaScriptEnabled(true);  
   /* 设置为true时表示支持使用js打开新的窗口 */  
  mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);  
   /* 当网页需要保存数时据,设置下面属性 */  
   mWebView.getSettings().setDomStorageEnabled(true);  
   /* 设置为使用webview推荐的窗口，主要是为了配合下一个属性 */  
   mWebView.getSettings().setUseWideViewPort(true);  
   /* 设置网页自适应屏幕大小，该属性必须和上一属性配合使用 */  
   mWebView.getSettings().setLoadWithOverviewMode(true);  
   /* 启用还H5的地理定位服务 */  
   mWebView.getSettings().setGeolocationEnabled(true);  
   /* 设置是否允许webview使用缩放的功能 */  
   mWebView.getSettings().setBuiltInZoomControls(false);  
   /* 提高网页渲染的优先级 */  
   mWebView.getSettings().setRenderPriority(RenderPriority.HIGH);  
   /* 设置是否显示水平滚动条 */  
   mWebView.setHorizontalScrollBarEnabled(false);  
   /* 设置垂直滚动条是否有叠加样式 */  
   mWebView.setVerticalScrollbarOverlay(true);  
   /* 设置滚动条的样式 */  
   mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);  

	//声明WebSettings子类
	WebSettings webSettings = webView.getSettings();
	 
	//如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
	webSettings.setJavaScriptEnabled(true);  
	// 若加载的 html 里有JS 在执行动画等操作，会造成资源浪费（CPU、电量）
	// 在 onStop 和 onResume 里分别把 setJavaScriptEnabled() 给设置成 false 和 true 即可
	 
	//支持插件
	webSettings.setPluginsEnabled(true); 
	 
	//设置自适应屏幕，两者合用
	webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小 
	webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
	 
	//缩放操作
	webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
	webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
	webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
	 
	//其他细节操作
	webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存 
	webSettings.setAllowFileAccess(true); //设置可以访问文件 
	webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 
	webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
	webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

当加载 html 页面时，WebView会在/data/data/包名目录下生成 database 与 cache 两个文件夹
请求的 URL记录保存在 WebViewCache.db，而 URL的内容是保存在 WebViewCache 文件夹下
是否启用缓存

    //优先使用缓存: 
    WebView.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); 
        //缓存模式如下：
        //LOAD_CACHE_ONLY: 不使用网络，只读取本地缓存数据
        //LOAD_DEFAULT: （默认）根据cache-control决定是否从网络上取数据。
        //LOAD_NO_CACHE: 不使用缓存，只从网络获取数据.
        //LOAD_CACHE_ELSE_NETWORK，只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据。
    //不使用缓存: 
    WebView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    if (NetStatusUtil.isConnected(getApplicationContext())) {
    webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);//根据cache-control决定是否从网络上取数据。
	} else {
	    webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);//没网，则从本地获取，即离线加载
	}
	 
	webSettings.setDomStorageEnabled(true); // 开启 DOM storage API 功能
	webSettings.setDatabaseEnabled(true);   //开启 database storage API 功能
	webSettings.setAppCacheEnabled(true);//开启 Application Caches 功能
	 
	String cacheDirPath = getFilesDir().getAbsolutePath() + APP_CACAHE_DIRNAME;
	webSettings.setAppCachePath(cacheDirPath); //设置  Application Caches 缓存目录

注意： 每个 Application 只调用一次 WebSettings.setAppCachePath()，WebSettings.setAppCacheMaxSize()

到此呢 希望本篇小小的简单的webView总结可以帮助到您，真诚希望能够留下您的宝贵建议。