WebView 安卓调用JS || JS调用安卓

太过爱你忘了你带给我的痛 2022-05-10 21:54 303阅读 0赞

## WebView扯一扯 ##

显示网页的视图。这个控件是你可以在你的活动中滚动你自己的网络浏览器或者简单地显示一些在线内容的基础。它使用WebKit渲染引擎来显示网页，并包括通过历史向前和向后导航、放大和缩小、执行文本搜索等的方法。

--------------------

## WebView使用 ##

首先加入布局文件，布局文件中写入WebView控件

<?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">
    
        <Button
            android:id="@+id/tojs"
            android:text="调用JavaScript"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    
        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"></WebView>
    
    </LinearLayout>

他可以调用方法webview.loadUrl("");来进行加载，网页，但是是默认打开手机默认浏览器来访问的，来看一下详细的吧！

我用的是ButterKnife实例化控件，跟普通实例化稍微不一样，通过注解的方式实例化控件，具体使用可以参照我的博客文章，以下是对webview做出的详细解释和注释，另附上html代码

代码中都有注释，不多做解释

public class MainActivity extends AppCompatActivity {
    
        //ButterKnife实例化控件
        @BindView(R.id.webview)
        WebView webview;
        @BindView(R.id.tojs)
        Button tojs;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            //ButterKnife绑定，是实例化控件的
            ButterKnife.bind(this);
    
            //设置webview的类
            WebSettings webSettings = webview.getSettings();
    
            //设置模式，有缓存则加载缓存，无缓存则网络加载
            webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
            
            //允许支持JS(JavaScript)
            webSettings.setJavaScriptEnabled(true);
            webview.setWebViewClient(new WebViewClient() {
    
                //这样就不会打开手机自带浏览器，而是在webview控件中显示
                @Override
                public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                    return true;
                }
    
                //这是网页开始加载时会调用的方法，可以用在加载前的一个动画
                @Override
                public void onPageStarted(WebView view, String url, Bitmap favicon) {
                    super.onPageStarted(view, url, favicon);
                    Toast.makeText(MainActivity.this, "开始加载", Toast.LENGTH_SHORT).show();
                }
    
                //这是网页加载结束后调用的一个方法，可以用来结束动画
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                    Toast.makeText(MainActivity.this, "加载完成", Toast.LENGTH_SHORT).show();
                }
            });
    
            webview.setWebChromeClient(new WebChromeClient());
    
            webview.loadUrl("网页地址");
    
        }
    
        //ButterKnife设置按钮监听事件
        @OnClick(R.id.tojs)
        public void onViewClicked() {
    
            //这是调用网页中js(javascript)的一个函数方法，调用:gotos()
            webview.post(
                    new Runnable() {
                        @Override
                        public void run() {
                        //调用js中方法
                            webview.loadUrl("javascript:gotos()");
                        }
                    }
            );
        }
    }

html:

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>我的页面</title>
    </head>
    <body>
    	床前明月光
    	<button type="button" onclick="gotos()">123</button>
    	
    	<script type="text/javascript">
    		function gotos(){
    			alert("我是弹窗")
    		}
    	</script>
    </body>
    </html>

--------------------

接下来写js调用安卓中的方法

webview提供了一个方法addJavascriptInterface，参数为Object,String

首先，先写js要调用的java类----myObj类继承自Object，我加了一句吐司，吐司的内容就是js传过来的内容

方法要用@JavascriptInterface进行注解

public class myObj extends  Object{
            @JavascriptInterface
            public void show(String str){
                Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
            }
        }

先来看html端

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	床前明月光<br>
    
    
    	<button type="button" onclick="JsToAndroid()">点击js调用安吐司</button><br><br><br>
    
    	<script type="text/javascript">
    
    		function JsToAndroid(){
    			jsto.show("js调用安卓");
    		}
    
    	</script>
    </body>
    </html>

js调用安卓，这句话就是传到java里的参数

当点击按钮后，调用JsToAndroid这个函数，之后通过addJavascriptInterface，调用java的类

看下addJavascriptInterface怎么写：第二个参数必须与js函数的jsto那个位置保持一致

webview.addJavascriptInterface(new myObj(),"jsto");