Android与JavaScript之间的相互调用

最新推荐文章于 2023-03-01 14:27:45 发布

xingxing_yan

最新推荐文章于 2023-03-01 14:27:45 发布

阅读量503

点赞数

分类专栏： Android博文文章标签： android webview javascript

本文链接：https://blog.csdn.net/xingxing_yan/article/details/50232203

版权

Android博文专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先，先大体说一下流程：

1. Android显示网页需要使用WebView，所以，定义一个WebView

2. 设置WebView控件可以执行JavaScript

3. 使用addJavascriptInterface方法声明允许JavaScript调用Android的方法

4. 使用@javascriptInterface注解一个方法，此方法就是web端需要调用的

5. 使用loadUrl去加载一个HTML页面(可以是本地也可以是网络的)

大概流程就是这样了，下面我们看代码：

主界面的布局activity_main.xml：

<span style="font-size:18px;"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <Button
        android:id="@+id/id_bt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="0dp"
        android:text="调用JavaScript" />
    <WebView
        android:id="@+id/id_web"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/id_bt" />
</RelativeLayout></span>

需要加载的HTML页面，我的页面是放在本地的，复制到自己项目的assets的目录下

<span style="font-size:18px;"><span style="font-size:14px;"><!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" οnclick="window.android.testJS()">JS invoke android method</button>
</body>
</html></span></span>

注意：页面中onclick中的android必须和下边 mWebView.addJavascriptInterface(MainActivity.this, "android")中的一致

主界面的代码：

<span style="font-size:18px;"><span style="font-size:14px;">package com.example.testother;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebSettings.LayoutAlgorithm;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;
 
public class MainActivity extends Activity {
 private WebView mWebView;
 private WebSettings mWebSettings;
 private Button mBt;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
         
        mBt = (Button) findViewById(R.id.id_bt);
        mWebView = (WebView) findViewById(R.id.id_web);
         
        mWebSettings = mWebView.getSettings();
  mWebSettings.setJavaScriptEnabled(true); //1. 设置WebView可以执行JavaScript
  mWebSettings.setSupportZoom(true);
  mWebSettings.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
  // 提高渲染等级
  mWebSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);
         
        mWebView.loadUrl("file:///android_asset/testH5.html");
        //2. 声明允许JavaScript调用Android应用的方法
        mWebView.addJavascriptInterface(MainActivity.this, "android");
        
        mWebView.setWebViewClient(new WebViewClient(){
         @Override
         public void onPageFinished(WebView view, String url) {
          super.onPageFinished(view, url);
          //3. Android中调用JS中方法
                mBt.setOnClickListener(new OnClickListener() {
           @Override
           public void onClick(View v) {
            mWebView.loadUrl("javascript:myFunction()");
           }
          });
         }
        });
    }
     
    //4 供JS调用的方法(必须使用@JavascriptInterface注解)
    @JavascriptInterface
    public void testJS(){
     Toast.makeText(this, "this is android method", Toast.LENGTH_SHORT).show();
    }
 
}</span></span>

主界面中布局中有一个Button和WebView控件，WebView加载的HTML页面中也有一个button，点击主界面的button会执行HTML页面中JavaScript的myFunction()方法，点击HTML页面中的button，则会执行Android 中的testJS()方法

xingxing_yan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android与JavaScript之间的相互调用

本文主要讲的是在Android客户端如何去执行HTML页面中JavaScript的方法，和在HTML页面如何去调用Android本地的方法首先，先大体说一下流程： 1. Android显示网页需要使用WebView，所以，定义一个WebView 2. 设置WebView控件可以执行JavaScript 3. 使用addJavascriptIn
复制链接

扫一扫