android与JS交互：相互调用方法、跳转到网页

在main下面New - Directory新建 assets - New - File 新建一个js_android.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title></title>
        <script type="text/javascript">
            //这个方式是被java调用的
            function androidCallJs(){
                alert("java调用js弹窗");
            }
            function androidCallJs(zhi){
                alert(zhi);
            }
            function aa(){
                var name=document.getElementById("user").value;
                text.showToast(name);
            }
        </script>
    </head>
    <body>
        <input id="user" type="text"/>
        <input type="submit" onclick="aa()" value = "点击获取输入框的值"/>
        <input type="button" onclick="text.showToast('js调用Android,我是XXX')" value="js调用java代码"/>
    </body>
</html>

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"/>
    <ProgressBar
        android:id="@+id/pb"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"/>
    <Button
        android:id="@+id/btn1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="JAVA调用js代码"/>
    <Button
        android:id="@+id/btn2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="加载百度页面"/>
    <Button
        android:id="@+id/btn3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="上一页"/>
    <WebView
        android:id="@+id/wv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

MainActivity里面,设置webview的显示,映射等:

public class MainActivity extends AppCompatActivity {

    private WebView wv;
    private Button btn1;
    private Button btn2;
    private Button btn3;
    private TextView tv;
    private ProgressBar pb;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        wv = findViewById(R.id.wv);
        btn1 = findViewById(R.id.btn1);
        btn2 = findViewById(R.id.btn2);
        btn3 = findViewById(R.id.btn3);
        tv = findViewById(R.id.tv);
        pb = findViewById(R.id.pb);
        //加载assets目录下的html文件
        wv.loadUrl("file:///android_asset/js_android.html");

        WebSettings settings = wv.getSettings();
        //是支持显示放大缩小的工具
        settings.setBuiltInZoomControls(true);
        //settings.setJavaScriptCanOpenWindowsAutomatically(true);
        //设置是否支持Js
        settings.setJavaScriptEnabled(true);
        //映射  2.别名
        wv.addJavascriptInterface(new JSInterface(), "text");
        //必加
        wv.setWebChromeClient(new WebChromeClient(){
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                //设置当前网页加载的进度
                pb.setProgress(newProgress);
                super.onProgressChanged(view, newProgress);
            }
            @Override
            public void onReceivedTitle(WebView view, String title) {
                //访问标题
                tv.setText(title);
                super.onReceivedTitle(view, title);
            }
        });
        wv.setWebViewClient(new WebViewClient(){
            //开始加载
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                pb.setVisibility(View.VISIBLE);
                super.onPageStarted(view, url, favicon);
            }
            //结束加载
            @Override
            public void onPageFinished(WebView view, String url) {
                pb.setVisibility(View.GONE);
                super.onPageFinished(view, url);
            }
        });
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //调取Js的方法进行传旨
                wv.loadUrl("javascript:androidCallJs('啦啦啦啦、啦啦啦啦')");
            }
        });
        //加载百度页面的点击事件
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                wv.loadUrl("http://www.baidu.com");
            }
        });
        //返回上一页
        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                wv.goBack();
            }
        });
    }

    //设置手机返回键为返回上一页网站
    //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
            wv.goBack();//调用goBack()返回WebView的上一页面
            return true;
        }
        return false;
    }

    private final class JSInterface{
        //定义一个接受值的方法
        //通过注解的方式向JS暴露一个接口 可以调到android里的方法
        //注意这里的@JavascriptInterface注解， target是4.2以上都需要添加这个注解，否则无法调用  
        @JavascriptInterface
        public void showToast(String name) {
            Toast.makeText(MainActivity.this, name, Toast.LENGTH_LONG).show();
        }
    }
}

android与JS交互：相互调用方法、跳转到网页

猜你喜欢