WebView用法与JS交互

最新推荐文章于 2023-06-09 15:56:50 发布
最新推荐文章于 2023-06-09 15:56:50 发布
阅读量2.9w 收藏 18
点赞数 1
分类专栏： Android 文章标签： android layout string url java javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenfeng0104/article/details/7023448
版权

这篇文章讲了一些WevView的使用方法，在项目中，常常会使用到，尤其是需要与JS交互。

效果图



点击“调用alert”按钮，在Android中捕获JS alert，并用Android组件（AlertDialog）替换


点击“调用java方法”按钮，在JS中调用并传递参数到Java中的方法



点击“调JS方法”按钮（这个按钮不是html元素，而是android元素），从Java端调用html中的JS方法，并传递参数到JS方法中。



完整代码

在assets目录下创建一个html文件来模拟WebView访问的内容


编辑js_interact_demo.html内容如下

<html>
<head>
  <title>JS交互</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <script type="text/javascript">
    function invokedByJava(param) {
    	document.getElementById("content").innerHTML = "Java has invoked JS function and returnd the data:"+param;
    }
  </script>
</head>
<body>
  <p id="content"></p>
  <p>
  <input type="button" value="调用Java方法" οnclick="window.stub.jsMethod('来至JS的参数');" />
  <input type="button" value="调用alert" οnclick="alert('hello')" />
  </p>
</body>
</html>


在res/layout目录下创建web_view.xml布局文件，内容如下 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <Button android:id="@+id/web_view_invoke_js"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="调JS方法"/>
    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content">
        <EditText android:id="@+id/web_view_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"/>
        <Button android:id="@+id/web_view_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="浏览"/>
    </LinearLayout>
    <WebView android:id="@+id/web_view"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

创建名为WebViewDemo的Activity文件 

public class WebViewDemo extends Activity {
    private WebView mWebView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.web_view);

        findViewById(R.id.web_view_invoke_js).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //调用JS方法，并传递参数
                mWebView.loadUrl("javascript:invokedByJava('java_data')");
            }
        });

        mWebView = (WebView)findViewById(R.id.web_view);
        mWebView.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
        mWebView.getSettings().setBuiltInZoomControls(true);
        mWebView.getSettings().setJavaScriptEnabled(true);

        /* 
          WebView默认用系统自带浏览器处理页面跳转。
                            为了让页面跳转在当前WebView中进行，重写WebViewClient。
                            但是按BACK键时，不会返回跳转前的页面，而是退出本Activity。重写onKeyDown()方法来解决此问题。
         */
        mWebView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);//使用当前WebView处理跳转
                return true;//true表示此事件在此处被处理，不需要再广播
            }
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                //有页面跳转时被回调
            }
            @Override
            public void onPageFinished(WebView view, String url) {
                //页面跳转结束后被回调
            }
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(WebViewDemo.this, "Oh no! " + description, Toast.LENGTH_SHORT).show();
            }
        });

        /*
                            当WebView内容影响UI时调用WebChromeClient的方法
         */
        mWebView.setWebChromeClient(new WebChromeClient() {
            /**
             * 处理JavaScript Alert事件
             */
            @Override
            public boolean onJsAlert(WebView view, String url,
                    String message, final JsResult result) {
                //用Android组件替换
                new AlertDialog.Builder(WebViewDemo.this)
                    .setTitle("JS提示")
                    .setMessage(message)
                    .setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            result.confirm();
                        }
                    })
                    .setCancelable(false)
                    .create().show();
                return true;
            }
        });

        /*
                          绑定Java对象到WebView，这样可以让JS与Java通信(JS访问Java方法)
                          第一个参数是自定义类对象，映射成JS对象
                          第二个参数是第一个参数的JS别名
                          调用示例：
            mWebView.loadUrl("javascript:window.stub.jsMethod('param')");
         */
        mWebView.addJavascriptInterface(new JsToJava(), "stub");
        
        final EditText mEditText = (EditText)findViewById(R.id.web_view_text);

        findViewById(R.id.web_view_search).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                String url = mEditText.getText().toString();
                if (url == null || "".equals(url)) {
                    Toast.makeText(WebViewDemo.this, "请输入URL", Toast.LENGTH_SHORT).show();
                } else {
                    if (!url.startsWith("http:") && !url.startsWith("file:")) {
                        url = "http://" + url;
                    }
                    mWebView.loadUrl(url);
                }
            }
        });
        //默认页面
        mWebView.loadUrl("file:///android_asset/js_interact_demo.html");
    }

    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //处理WebView跳转返回
        if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()) {
            mWebView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
    
    private class JsToJava {
        public void jsMethod(String paramFromJS) {
            Log.i("CDH", paramFromJS);
        }
    }
}




DaveeChen
关注
  • 1
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【虚幻引擎UE】运行和启动的区别，常见问题分析
灵境引路人
10-19 1081
UE5 运行可以启动或打包异常的解决方案
iOS原生与WebView JS交互
07-09
一行代码注册方法,使用闭包形式回调交互;方便就是方便
详解 WebView 与 JS 交互传值问题
01-06
随着混合开发模式比较流行，很多时候，我们需要在原生的基础上，使用 WebView 加载网页，这样控制更加方便。今天我们来看看，如何将 Java 对象 和 List 集合传值给 JS 调用。 如何将 Java 对象实例传值给 JS 其实将我们在 Android 原生中将 Java 对象实例传值给 JS 承认并且可以使用的对象，方法非常简单。我们来举个例子。 html 文件 我们在本地写了一个 html 文件，放在 assets 目录中。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>测试</title> <h
android不使用webview与js交互
10-27
android不使用webview与js交互
Android AgentWeb WebView 与js交互总结
最新发布
w风雨无阻w的专栏
06-09 2617
想必熟悉android开发的同学都知道使用原生 webview 与js 的交互方式，下面我们先来回顾一下。webview 通过addJavascriptInterface 进行对象映射首先要打开交互权限 , 允许使用javascript说明：以上“ JsInterface ”、“android” 都可以自己命名，这里仅做为示例。那么使用 AgentWeb的Webview和js 的交互方式，你知道吗？其实和原生webview与js的交互还是有些出入的，接下来，我们以代码进行详细说明。根据。
webview与js的交互
vchao的博客
09-22 583
一直接触安卓，其实对js并不算了解。虽然知道挺重要的，但是以前项目中并没有过多接触过相关知识，所以一直把这块知识闲置着。最近在做一个比赛的东西，用到了网页，需要通过调用js来屏蔽这些元素。于是便正好来练习一下。
Android：WebView与 JS 的三种交互方式详解与对比
u011339364的专栏
10-26 772
目录 1. 交互方式总结 Android与JS通过WebView互相调用方法，实际上是： Android去调用JS的代码JS去调用Android的代码 二者沟通的桥梁是WebView 对于Android调用JS代码的方法有2种：  1. 通过WebView的loadUrl（）  2. 通过WebView的evaluateJavascript（）
Vue3与UE5的交互
m0_50666077的博客
01-04 2379
Vue3与UE5交互
Android WebView使用方法详解 附js交互调用方法
09-02
主要为大家详细介绍了Android WebView使用方法详解，文中附js交互调用方法，感兴趣的小伙伴们可以参考一下
Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】
10-20
主要介绍了Android编程使用WebView实现与Javascript交互的方法,可实现基于WebView与JavaScript相互调用参数、传值的功能,需要的朋友可以参考下
音频压缩工具——Speex的使用
热门推荐
chenfeng0104的专栏
12-20 3万+
在Android开发中，需要录音并发送到对方设备上。这时问题来了，手机常会是GPRS、3G等方式上网，所以节省流量是非常关键的，使用Speex来压缩音频文件，可以将音频压文件小数倍。 1.去Speex官网下载最新Speex源码。 2.创建一个新的应用（我创建的应用名为Audio），并创建一个jni目录（$project/jni）。 3.把speex源码目录下的libspeex和include
android命令行打包、签名+自动打包器
chenfeng0104的专栏
12-31 2万+
本文主要讲解使用命令行打包android工程成apk文件，我的android工程结构如图 1.创建key: 使用keytool.exe(位于%JAVA_HOME%\bin\keytool.exe)创建xxx.keystore，在命令行输入： keytool -genkey -alias debug.keystore -keyalg RSA -validity 20000 -ke
深入分析AIDL原理
chenfeng0104的专栏
11-18 2万+
在上一篇文章（Service使用方式）中，介绍了Android进程间通信（IPC）的使用，并给出了一个示例。但并没有深入分析aidl是怎样可以做到进程间通信的，它的执行过程是怎样的？ 这篇文章来分析IRemoteService.aidl的执行过程，并理解aidl是怎样跨进程通信的。   当我们创建IRemoteService.aidl文件时，IDE会为我们在gen目录中创建相应的
Android IPC进程通信——Messager方式
chenfeng0104的专栏
11-25 1万+
Android IPC通信有两种方式，上一篇文章深入分析AIDL原理讲解了AIDL方式，这篇文章讲解另一种IPC通信方式——Messager方式。 Messager实现IPC通信，底层也是使用了AIDL方式。和AIDL方式不同的是，Messager方式是利用Handler形式处理，因此，它是线程安全的，这也表示它不支持并发处理；而AIDL方式是非线程安全的，支持并发处理，因此，我们使用AIDL方
Android中开启一个空线程会占用多少内存
chenfeng0104的专栏
04-11 1万+
Android开发中，开启一个线程会占用多少内存空间？这个问题我一直没有测试过，以前在网上看见别人说需要1M内存（可能是该网友包含了很多数据），今天对这个问题做了一个测试。为了不影响测试，我使用空线程（线程不做任何事情，也不包含任何数据）。 先贴上测试代码 thread_occupy_memory.xml <LinearLayout xmlns:android="http://sc
Android通过NDK获取Keystore签名值
chenfeng0104的专栏
03-20 1万+
防止别人反编译自已的游戏再修改然后发布，我们可以用在so文件中用Keystore签名值来加密一些参数。 这里只提供NDK获取Keystore签名值代码 package com.boyaa.ndk; import android.content.Context; public class RegionGames { static { try { System.loadLi
webview与js交互
05-26
在 Android 中，WebView 是一个内置的浏览器控件，可以加载网页并在应用程序中显示。WebView 与 JavaScript 的交互是常见的需求，主要有以下几种方式： 1. 通过 WebView 中的 loadUrl() 方法调用 JavaScript 函数。 可以使用 WebView 的 loadUrl() 方法加载一个包含 JavaScript 代码的 URL，实现与 JavaScript 的交互。例如，在 JavaScript 中定义一个函数： ```javascript function showToast(message) { alert(message); } ``` 然后在 Android 中使用 loadUrl() 方法调用这个函数： ```java webView.loadUrl("javascript:showToast('Hello World!')"); ``` 2. 在 WebView 中启用 JavaScript，并使用 addJavascriptInterface() 方法将 Java 对象注入到 JavaScript 中。 可以在 WebView 中启用 JavaScript 支持，并使用 addJavascriptInterface() 方法将 Java 对象注入到 JavaScript 中。这样，JavaScript 就可以调用 Java 对象的方法。例如，在 Java 中定义一个类： ```java public class MyJavaScriptInterface { private Context context; public MyJavaScriptInterface(Context context) { this.context = context; } @JavascriptInterface public void showToast(String message) { Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } } ``` 然后在 WebView 中启用 JavaScript 支持，并将 MyJavaScriptInterface 对象注入到 JavaScript 中： ```java webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new MyJavaScriptInterface(this), "Android"); ``` 在 JavaScript 中就可以调用 MyJavaScriptInterface 对象的 showToast() 方法： ```javascript Android.showToast("Hello World!"); ``` 3. 使用 evaluateJavascript() 方法执行 JavaScript 代码并获取返回值。 可以使用 WebView 的 evaluateJavascript() 方法执行 JavaScript 代码，并通过回调函数获取返回值。例如，在 JavaScript 中定义一个函数： ```javascript function add(a, b) { return a + b; } ``` 然后在 Android 中使用 evaluateJavascript() 方法执行这个函数，并获取返回值： ```java webView.evaluateJavascript("add(1, 2)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { // value = "3" } }); ``` 以上就是 WebView 与 JavaScript 的交互方式，开发者可以根据需求选择适合自己的方式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值