WebView与js的交互

作者: KenChen_939 | 来源:发表于2019-11-20 15:51 被阅读0次

    Android与js相互调用的桥梁是WebView

    1:Android通过WebView调用js

    调用js代码实用的主要方法:通过WebView的evaluateJavascript( )
    js代码示例如下:

    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            h1{
                color:red;
            }
        </style>
    </head>
    <body>
    <h1>Hello World!!!</h1>
    
    <button>test</button>
    <script>
            function  fun1(msg){
                document.querySelector("h1").innerHTML=msg
                return "Hello:"+msg
            }
            document.querySelector("button").onclick=function(){
                myService.jump();
            }
    
    
        </script>
    </body>
    </html>
    

    我们即将调用的就是js代码中的fun1方法

    在Android中调用方法如下:

    实例化WebView之后设置与js交互的权限等:

            WebSettings settings=webView.getSettings();
            settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
            settings.setJavaScriptEnabled(true);
    

    之后设置按钮的点击事件:

    webView.evaluateJavascript("javascript:fun1('JohnYu')", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    Toast.makeText(MainActivity.this,value,Toast.LENGTH_LONG).show();
                }
            });
    

    这样在点击按钮的时候就会调用js代码中的方法了

    2:js调用Android

    使用的方法为WebView中的addJavascriptInterface()进行对象映射
    首先要创建一个与JS对象映射关系的Android类

    public class MyService {
        private Context context;
        //传入Activity对象
    
        public MyService(Context context) {
            this.context = context;
        }
    
        @JavascriptInterface
        public String work(String s){
            return "Hello:"+s;
        }
        @JavascriptInterface
        public void jump(){
            Intent intent=new Intent();
            intent.setClass(context,OtherActivity.class);
            context.startActivity(intent);
        }
    }
    

    2:在js代码中写相应的方法,代码上面已经给过了
    3:在webview中使用:

    webView.loadUrl("http://johnyu.cn/my.html");
            webView.addJavascriptInterface(new MyService(this),"myService");
    

    全部代码:

    public class MainActivity extends AppCompatActivity {
    
        private WebView webView;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            webView =findViewById(R.id.web);
    
            WebSettings settings = webView.getSettings();
            settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
            settings.setJavaScriptEnabled(true);
            webView.addJavascriptInterface(new MyService(this),"myService");
            webView.loadUrl("http://johnyu.cn/my.html");
    
        }
    
    
        @RequiresApi(api = Build.VERSION_CODES.KITKAT)
        public void call(View view) {
    
            webView.evaluateJavascript("javascript:fun1('JohnYu')", new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    Toast.makeText(MainActivity.this,value,Toast.LENGTH_LONG).show();
                }
            });
        }
    
    }
    
    
    <?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"
        tools:context=".MainActivity" android:orientation="vertical">
    
      <WebView
          android:id="@+id/webView"
          android:layout_width="match_parent"
          android:layout_height="0dp" android:layout_weight="1">
    
      </WebView>
    
      <Button
          android:onClick="call"
          android:text="call"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"></Button>
    
    
    </LinearLayout>
    

    相关文章

      网友评论

        本文标题:WebView与js的交互

        本文链接:https://www.haomeiwen.com/subject/gdpnictx.html