学习WebView和js的交互

WebView和js如何交互？

1.js如何调用android

< a  onClick ="window.demo.clickOnAndroid()" >

代码中的“demo”是在android中指定的调用名称，即

mWebView.addJavascriptInterface( new DemoJavaScriptInterface(), "demo");

代码中的clickOnAndroid()是“demo”对应的对象： new DemoJavaScriptInterface() 中的一个方法。

2.android如何调用js。

mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

3.其他

WebView的前进和后退（历史记录）

goForward()  前进

goBack() 后退

goBackOrForward(int index)  前进或者后退  index>0,前进；index<0,后退。

页面自适应屏幕

mWebView .getSettings().setJavaScriptEnabled(true); 
mWebView .getSettings().setBuiltInZoomControls(true);

mWebView .getSettings().setSupportZoom(true);

页面支持缩放

mWebView .getSettings().setJavaScriptEnabled(true); 
mWebView .getSettings().setBuiltInZoomControls(true);

mWebView .getSettings().setSupportZoom(true);

设置支持获取手势焦点

webview.requestFocusFromTouch();

WebView 加载界面主要调用三个方法：LoadUrl、LoadData、LoadDataWithBaseURL. 

1、LoadUrl            直接加载网页、图片并显示.（本地或是网络上的网页、图片、gif） 
2、LoadData           显示文字与图片内容 （模拟器1.5、1.6） 
3、LoadDataWithBase  显示文字与图片内容（支持多个模拟器版本）

WebSettings 的常用方法介绍

setJavaScriptEnabled(true);  //支持js

setPluginsEnabled(true);  //支持插件 

setUseWideViewPort(false);  //将图片调整到适合webview的大小 

setSupportZoom(true);  //支持缩放 

setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局 

supportMultipleWindows();  //多窗口 

setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);  //关闭webview中缓存 

setAllowFileAccess(true);  //设置可以访问文件 

setNeedInitialFocus(true); //当webview调用requestFocus时为webview设置节点

webview webSettings.setBuiltInZoomControls(true); //设置支持缩放 

setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口 

setLoadWithOverviewMode(true); // 缩放至屏幕的大小

setLoadsImagesAutomatically(true);  //支持自动加载图片

WebViewClient 的方法（红的常用）

doUpdateVisitedHistory(WebView view, String url,  boolean isReload)  // (更新历史记录) 

onFormResubmission(WebView view, Message dontResend, Message resend)  // (应用程序重新请求网页数据) 

onLoadResource(WebView view, String url)  //  在加载页面资源时会调用，每一个资源（比如图片）的加载都会调用一次。 

onPageStarted(WebView view, String url, Bitmap favicon) // 这个事件就是开始载入页面调用的，通常我们可以在这设定一个loading的页面，告诉用户程序在等待网络响应。 

onPageFinished(WebView view, String url)  // 在页面加载结束时调用。同样道理，我们知道一个页面载入完成，于是我们可以关闭loading 条，切换程序动作。 

onReceivedError(WebView view,  int errorCode, String description, String failingUrl) //  (报告错误信息) 

onReceivedHttpAuthRequest(WebView view, HttpAuthHandler handler, String host,String realm) // （获取返回信息授权请求）  

onReceivedSslError(WebView view, SslErrorHandler handler, SslError error)  // 重写此方法可以让webview处理https请求。 

onScaleChanged(WebView view,  float oldScale,  float newScale)  //  (WebView发生改变时调用) 

onUnhandledKeyEvent(WebView view, KeyEvent event)  // （Key事件未被加载时调用） 

shouldOverrideKeyEvent(WebView view, KeyEvent event) // 重写此方法才能够处理在浏览器中的按键事件。 

shouldOverrideUrlLoading(WebView view, String url) 
//在点击请求的是链接是才会调用，重写此方法返回true表明点击网页里面的链接还是在当前的webview里跳转，不跳到浏览器那边。这个函数我们可以做很多操作，比如我们读取到某些特殊的URL，于是就可以不打开地址，取消这个操作，进行预先定义的其他操作，这对一个程序是非常必要的。

练一练：

1.首先webview要添加到activity中

findViewById

2.设置settings

根据自己的需要设置

CustomWebView.this.getSettings().setLoadWithOverviewMode(true);
CustomWebView.this.getSettings().setUseWideViewPort(true);
CustomWebView.this.getSettings().setBuiltInZoomControls(true);
CustomWebView.this.getSettings().setJavaScriptEnabled(true);
CustomWebView.this.setScrollbarFadingEnabled(true);
CustomWebView.this.setInitialScale(1);

3.设置webclient

3.1 先根据需要自定义一个

<span style="font-size:18px;">public class ExtendedWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }

    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        if(view instanceof CustomWebView)
        {
            ((CustomWebView)view).showLoading();
            ((CustomWebView)view).initToolBar();
        }
    }
}</span>

3.2 设置自定义的webclient

CustomWebView.this.setWebViewClient(new ExtendedWebViewClient());

4.html中调用Android设置的js接口 

4.1 在java代码中 自定义 customJavascriptInterface

final  class CustomWebViewJavaScriptInterface {
    CustomWebViewJavaScriptInterface(){
 

  	 }

	@JavascriptInterface
	public void downPdf(final String url){
  	//to-do 
	}

}

(注意 ： @JavascriptInterface 涉及4.1的安全性 )

4.2 webview设置

CustomWebView.this.addJavascriptInterface(new CustomWebViewJavaScriptInterface(),"alias");

4.3 html端调用

οnclick="window.alias. downPdf ( url )";

5.WebView有历史记录（history）

为自定义的添加webview两个按钮并设置相应的监听事件

5.1设置监听事件

OnClickListener toolBarClickListener = new OnClickListener() {
    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case  R.id.preBtn :
                CustomWebView.this.goBack();
                break;
            case  R.id.nextBtn :
                CustomWebView.this.goForward();
                break;
        }
    }
};

5.2添加按钮

if(view instanceof CustomWebView)
{
    ((CustomWebView)view).showLoading();
    ((CustomWebView)view).initToolBar();
}

public void initToolBar()
{
    if(!isInitToolBar) {
        View parentView = (View) this.getParent();
        if (parentView != null) {
            View preBtn = parentView.findViewById(R.id.preBtn);
            if (preBtn != null) preBtn.setOnClickListener(toolBarClickListener);
            View nextBtn = parentView.findViewById(R.id.nextBtn);
            if (nextBtn != null) nextBtn.setOnClickListener(toolBarClickListener);
        }
        isInitToolBar = true;
    }
}