使用WebView中的Javascript和本地代码交互-优快云博客

本文链接：https://blog.youkuaiyun.com/ssuchange/article/details/24802305

本文介绍了如何在Android应用中使用WebView组件与JavaScript进行交互，包括加载HTML内容、调用JavaScript函数以及从JavaScript调用Android本地方法。示例代码和下载链接提供了详细实现步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在加载url之前，使用 Webview的addJavascriptInterface方法注册本地代码和javascript的绑定。

比如js里面调用Toast.show(message）,那么就需要在addJavascriptInterface中将本地的类绑定到js里面的类名Toast。

例如：mWebview.addJavascriptInterface(new ShowToast(), JS_BIND_NAME_TOAST);

在本地类ShowToast中实现public方法show（string str），并且在方法名签名加上@JavascriptInterface标签。

本地代码示例：

package com.example.javascriptcalldemo;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity {
    //js namespace
    public static final String JS_BIND_NAME_TOAST = "Toast";
    WebView mWebview;
    RelativeLayout myView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        LinearLayout layout = new LinearLayout(getApplicationContext());
        layout.setOrientation(LinearLayout.VERTICAL);
        
        LayoutParams layoutParams = new LayoutParams(LayoutParams.MATCH_PARENT, 0);
        layoutParams.weight = 1;
        
        mWebview = new WebView(getApplicationContext());
        layout.addView(mWebview, layoutParams);
        
        myView = new RelativeLayout(getApplicationContext());
        layout.addView(myView, layoutParams);
        
        setContentView(layout);
        
        // 设置支持javascript
        mWebview.getSettings().setJavaScriptEnabled(true);
        //注册
        mWebview.addJavascriptInterface(new ShowToast(), JS_BIND_NAME_TOAST);
        
        autoStartJS();
        
        initWebView();
        
        initMyView();
    }
    
    public void autoStartJS(){
        //js触发必须先加载网页
        mWebview.loadData("", "text/html", null);
        //js回调android方法必须在网页加载结束，否则关联不上。这里使用延迟。
        mWebview.postDelayed(new Runnable() {
            
            @Override
            public void run() {
                //直接加载脚本
                mWebview.loadUrl("javascript:Toast.show('Hello')");
            }
        }, 1000);
    }
    public void initWebView(){
        //加载asset中的本地html
        mWebview.loadUrl("file:///android_asset/test.html");
    }
    
    public void initMyView(){
        LinearLayout layout = new LinearLayout(getApplicationContext());
        final EditText editView = new EditText(getApplicationContext());
        editView.setText("ssu");
        editView.setWidth(300);
        editView.setTextColor(Color.BLACK);
        editView.setBackgroundColor(Color.GRAY);
        layout.addView(editView);
        Button button = new Button(getApplicationContext());
        button.setText("Submit");
        button.setTextColor(Color.BLACK);
        button.setBackgroundColor(Color.GRAY);
        button.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View v) {
                new ShowToast().show(editView.getText().toString());
            }
        });
        LayoutParams layoutParams = new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
        layoutParams.setMargins(10, 10, 10, 10);
        layout.addView(button, layoutParams);
        myView.addView(layout);
        myView.setBackgroundColor(Color.WHITE);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mWebview.removeJavascriptInterface(JS_BIND_NAME_TOAST);
    }

    class ShowToast {
        @JavascriptInterface
        public String show(final String str) {

            // Looper.prepare();
            new Handler(Looper.getMainLooper()).post(new Runnable() {

                @Override
                public void run() {
                    Toast.makeText(getApplicationContext(), str,
                            Toast.LENGTH_SHORT).show();
                }
            });
            return str;
        }
    }
}

本地html示例：



	
	.
	.
	<script  type="text/javascript">
		document.write("Hello world!");
        function showToast() {
            Toast.show(document.getElementById("textID").value);
        }
	</script>
	
	
	.
	.

运行截图：