关于webview调用js

转载:https://blog.csdn.net/carson_ho/article/details/64904691

Android与JS通过WebView互相调用方法,实际上是:

  • Android去调用JS的代码
  • JS去调用Android的代码

二者沟通的桥梁是WebView

对于Android调用JS代码的方法有2种: 
1. 通过WebViewloadUrl() 
2. 通过WebViewevaluateJavascript()

对于JS调用Android代码的方法有3种: 
1. 通过WebViewaddJavascriptInterface()进行对象映射 
2. 通过 WebViewClient 的shouldOverrideUrlLoading ()方法回调拦截 url 
3. 通过 WebChromeClient 的onJsAlert()onJsConfirm()onJsPrompt()方法回调拦截JS对话框alert()confirm()prompt() 消息


2. 具体分析

2.1 Android通过WebView调用 JS 代码

对于Android调用JS代码的方法有2种: 
1. 通过WebViewloadUrl() 
2. 通过WebViewevaluateJavascript()

方式1:通过WebViewloadUrl()

  • 实例介绍:点击Android按钮,即调用WebView JS(文本名为javascript)中callJS()
  • 具体使用:

步骤1:将需要调用的JS代码以.html格式放到src/main/assets文件夹里

  1. 为了方便展示,本文是采用Andorid调用本地JS代码说明;
  2. 实际情况时,Android更多的是调用远程JS代码,即将加载的JS代码路径改成url即可

需要加载JS代码:javascript.html

// 文本名:javascript

<html>
<head>
     <meta charset="utf-8">
     <title>Carson_Hotitle>

// JS代码
    <script>
// Android需要调用的方法
   function callJS(){
      alert("Android调用了JS的callJS方法");
   }
script>

   head>

html>

步骤2:在Android里通过WebView设置调用JS代码

Android代码:MainActivity.java

注释已经非常清楚

 public class MainActivity extends AppCompatActivity {

    WebView mWebView;
    Button button;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWebView =(WebView) findViewById(R.id.webview);

        WebSettings webSettings = mWebView.getSettings();

        // 设置与Js交互的权限
        webSettings.setJavaScriptEnabled(true);
        // 设置允许JS弹窗
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

        // 先载入JS代码
        // 格式规定为:file:///android_asset/文件名.html
        mWebView.loadUrl("file:///android_asset/javascript.html");

        button = (Button) findViewById(R.id.button);


        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 通过Handler发送消息
                mWebView.post(new Runnable() {
                    @Override
                    public void run() {

                        // 注意调用的JS方法名要对应上
                        // 调用javascript的callJS()方法
                        mWebView.loadUrl("javascript:callJS()");
                    }
                });

            }
        });

        // 由于设置了弹窗检验调用结果,所以需要支持js对话框
        // webview只是载体,内容的渲染需要使用webviewChromClient类去实现
        // 通过设置WebChromeClient对象处理JavaScript的对话框
        //设置响应js 的Alert()函数
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {
                AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);
                b.setTitle("Alert");
                b.setMessage(message);
                b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        result.confirm();
                    }
                });
                b.setCancelable(false);
                b.create().show();
                return true;
            }

        });


    }
}

效果图

特别注意:JS代码调用一定要在 onPageFinished() 回调之后才能调用,否则不会调用。

onPageFinished()属于WebViewClient类的方法,主要在页面加载结束时调用

1. 第一种方式:直接调用

  •  view.loadUrl("javascript:showAlert()");这里的showAlert()是网页里面的js函数            
  • 还可以Android自己调用自己的接口函数:view.loadUrl("javascript:window.Android.testtt()");这个testtt()是写在WebAppInterface()接口类里面的函数                                                                               
  •  还可以直接调用js的系统函数  view.loadUrl("javascript:alert(123)");





你可能感兴趣的:(关于webview调用js)