简述WebView与 js的交互流程 ?

在Android开发中,WebView 是一个非常有用的组件,它可以在应用内显示网页,实现网页与原生应用的交互。与JavaScript的交互主要通过以下几个步骤实现:

  1. 启用JavaScript: 首先,需要在 WebView 设置中启用JavaScript,因为默认情况下它是禁用的。这可以通过调用 WebViewgetSettings().setJavaScriptEnabled(true); 来实现。

  2. JavaScript接口: 你可以在Android代码中创建一个类,并将其实例作为一个接口暴露给JavaScript。这个类的方法可以使用 @JavascriptInterface 注解,以便它们可以从网页的JavaScript代码中调用。例如,你可以创建一个名为 WebAppInterface 的类,包含一个方法 showToast,用于从网页触发Android的Toast通知。

    public class WebAppInterface {
       Context mContext;
    
       /** Instantiate the interface and set the context */
       WebAppInterface(Context c) {
           mContext = c;
       }
    
       /** Show a toast from the web page */
       @JavascriptInterface
       public void showToast(String toast) {
           Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
       }
    }
    

    然后,在你的 WebView 中添加这个接口:

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
    
  3. 从JavaScript调用Android方法: 一旦接口添加到 WebView,你就可以从网页的JavaScript中调用Android方法了。例如,调用上面的 showToast 方法:
    <script type="text/javascript">
       function callAndroid() {
           Android.showToast("Hello from JavaScript");
       }
    </script>
    <button onclick="callAndroid()">Say Hello</button>
    
  4. 从Android调用JavaScript: 你也可以反过来从Android代码调用WebView中的JavaScript函数。使用 WebViewloadUrl 方法,你可以调用JavaScript函数,例如:
    myWebView.loadUrl("javascript:callJSFunction()");
    

    这里 callJSFunction() 是你在网页中定义的JavaScript函数。

通过这种方式,Android应用与网页内容之间可以实现互动,例如在网页上显示来自Android的实时数据,或者控制应用导航等。

发表评论

后才能评论