WebView与Js的交互

建立一个文件夹名字叫做：assets

WebView与Js的交互

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		body{
			background-color: coral;
		}
		.btn{
			line-height: 40px;
			margin: 10px;
			background-color: cadetblue;
		}
	</style>
	<body>
		 <h2>WebView</h2> 
        <div>
            <span>请输入要传入的值：</span><input type="text" id="input">
        </div>

        <div id="btn">
            <span>点击我</span>
        </div>
	</body>
	
	<script type="text/javascript">
		
		var btnEln = document.getElementById("btn");
		var btnInput = document.getElementById("input");
        //添加点击事件
		btnEln.addEventListener("click",function(){
			var str =  btnInput.value;
            <!-- 判断Android程序中是否有这个类imoocLauncher -->
			if(window.imoocLauncher){
                <!-- 如果有调用其中的方法传入值 -->
				imoocLauncher.setValue(str);
			}else{
                 <!-- 否则弹框提示本类找不到防止崩溃 -->
				alert("imoocLauncher ont found")
			}
		});
         <!-- 在script中定义一个方法改变文本框中的值 -->
		var setIput = function(str){
			btnInput.value = str;
		}
	</script>
</html>

回调接口的编写：


public interface JsBridge {
    void setText(String string);
}

接口类的编写：

public class ImoocJsInterface {

    public static final String TAG = "ImoocJsInterface";

    //定义接口
    private JsBridge jsBridge;
    
    //通过方法实例化接口
    public void setJsBridge(JsBridge jsBridge) {
        this.jsBridge = jsBridge;
    }
       
    //从html中返回的数据是在子线程所有用线程间的通信工具handler进行通信
    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            String data = (String) msg.obj;
            //调用接口中的方法
            jsBridge.setText(data);
        }
    };

    @JavascriptInterface//接口类中的方法一定要用这个注解不然html识别不到本方法
    public void setValue(String value) {
        Message msg = Message.obtain();
        msg.obj = value;
        handler.sendMessage(msg);
    }

}

public class MainActivity extends AppCompatActivity implements JsBridge ,View.OnClickListener{

    private WebView webView;
    private TextView txt_content;
    private EditText et_input;
    private Button bnt_ok;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initWidgets(savedInstanceState);
    }


    private void initWidgets(Bundle savedInstanceState) {

        webView = (WebView) findViewById(R.id.test_webview);
        txt_content = (TextView) findViewById(R.id.txt_content);
        et_input = (EditText)findViewById(R.id.et_input) ;
        bnt_ok = (Button) findViewById(R.id.but_ok);
        bnt_ok.setOnClickListener(this);
        
        //为WebView设置添加js
        webView.getSettings().setJavaScriptEnabled(true);

        //为WebViwe设置接口类
        ImoocJsInterface imoocJsInterface = new ImoocJsInterface();
        imoocJsInterface.setJsBridge(this);
        webView.addJavascriptInterface(imoocJsInterface, "imoocLauncher");

        webView.loadUrl("file:///android_asset/index.html");
           

        //开启浏览器调试本方法必须在api 19 加一条判断
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            webView.setWebContentsDebuggingEnabled(true);
        }
    }

    

    //实现JsBridge 接口中的方法用于接口回调
    @Override
    public void setText(String string) {
        txt_content.setText(string);
    }

    //点击事件触发html中的setIput方法传入值str 
    @Override
    public void onClick(View v) {
        String str = et_input.getText().toString();
        Toast.makeText(this,str,Toast.LENGTH_SHORT).show();
        webView.loadUrl("javascript:if(window.setIput){window.setIput('"+str+"')}");
    }
}

相关推荐