[android] WebView与Js交互详解手机开发

获取WebView对象

调用WebView对象的getSettings()方法，获取WebSettings对象

调用WebSettings对象的setJavaScriptEnabled()方法，设置js可用，参数：布尔值

在判断是否支持js的时候，不要用alert()，默认不起作用，可以先用document.write()测试

调用WebView对象的addJavascriptInterface(obj, interfaceName)方法，添加js接口，参数：Object对象，String接口名称（这个对象在js中的别名）

定义一个内部类MyJavascript

定义一个方法showToast()，显示吐司，api版本大于17需要加注解@JavascriptInterface

java代码：

package com.tsh.mywebview; 
 
import android.annotation.SuppressLint; 
import android.app.Activity; 
import android.app.ProgressDialog; 
import android.graphics.Bitmap; 
import android.os.Bundle; 
import android.view.KeyEvent; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.view.Window; 
import android.webkit.JavascriptInterface; 
import android.webkit.WebSettings; 
import android.webkit.WebView; 
import android.webkit.WebViewClient; 
import android.widget.Toast; 
 
public class MainActivity extends Activity { 
    private WebView webview; 
    private ProgressDialog pd; 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        requestWindowFeature(Window.FEATURE_NO_TITLE); 
        setContentView(R.layout.activity_main); 
         
        pd=new ProgressDialog(this); 
        pd.setMessage("正在加载..."); 
         
         
        //webview的简单设置 
        webview=(WebView) findViewById(R.id.wv_internet); 
        //http://100.65.187.106/test.php 
        webview.loadUrl("http://100.65.187.106/test.php"); 
        WebSettings websettings=webview.getSettings(); 
        websettings.setSupportZoom(true); 
        websettings.setBuiltInZoomControls(true); 
         
        //js交互 
        new MyJavascript().showToast("111"); 
        websettings.setJavaScriptEnabled(true); 
        webview.addJavascriptInterface(new MyJavascript(), "Android"); 
        webview.loadUrl("javascript:documentWrite('测试')"); 
         
        webview.setWebViewClient(new WebViewClient(){ 
            @Override 
            public void onPageStarted(WebView view, String url, Bitmap favicon) { 
                pd.show(); 
            } 
            @Override 
            public void onPageFinished(WebView view, String url) { 
                pd.dismiss(); 
            } 
        }); 
         
    } 
    //暴露给js的功能接口 
    public class MyJavascript{ 
        //显示吐司 
        // 如果target 大于等于API 17，则需要加上如下注解 
        @JavascriptInterface 
        public void showToast(String text) { 
            Toast.makeText(MainActivity.this, text, 1).show(); 
        } 
        //显示loading 
        @JavascriptInterface 
        public void showProgressDialog(String text) { 
            pd.setMessage(text); 
            pd.show(); 
        } 
    } 
    //后退键 
    @Override 
    public boolean onKeyDown(int keyCode, KeyEvent event) { 
        if(keyCode==KeyEvent.KEYCODE_BACK&&webview.canGoBack()){ 
            webview.goBack(); 
            return true; 
        } 
        return super.onKeyDown(keyCode, event); 
    } 
    //菜单键 
    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
        menu.add(0, 0, 0, "刷新"); 
        menu.add(0, 0, 1, "后退"); 
        menu.add(0, 0, 2, "前进"); 
        return super.onCreateOptionsMenu(menu); 
    } 
    //菜单点击事件 
    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 
        switch (item.getOrder()) { 
        case 0: 
            webview.reload(); 
            break; 
        case 1: 
            if(webview.canGoBack()){ 
                webview.goBack(); 
            } 
            break; 
        case 2: 
            if(webview.canGoForward()){ 
                webview.goForward(); 
            } 
            break; 
        } 
        return super.onOptionsItemSelected(item); 
    } 
 
}

js代码：

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>测试android程序</title> 
</head> 
<body> 
 
    测试android和js交互 
    <br/> 
    <button onClick="showToast()">显示吐司</button> 
    <br/> 
    <button onClick="showProgressDialog()">显示loading</button> 
<script type="text/javascript"> 
function showToast(){ 
    Android.showToast("显示吐司"); 
} 
function showProgressDialog(){ 
    Android.showProgressDialog("显示进度条"); 
} 
 
</script> 
</body> 
</html>

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/tech/app/5407.html

[android] WebView与Js交互详解手机开发

相关推荐

发表回复