Android WebView 和 javaScript的互相调用(三)

最新推荐文章于 2024-06-20 20:20:21 发布
最新推荐文章于 2024-06-20 20:20:21 发布
阅读量996 收藏
点赞数
分类专栏： Android基础 文章标签： javascript android html webview 前端

原文出处：http://motalks.cn/2016/08/27/Android-WebView-JavaScript-2/

WebView相关阅读

一、Demo动图演示

动图镇楼，演示功能点的顺序是：5-1-2-3-4

这里写图片描述

二、怎么生成我们需要的 HTML 页面？

当我们get了WebView 和 JavaScript交互的技能时，准备跃跃欲试的时候，就会对这个被这个问题搞懵逼了，他娘的我又不是前端，要我立马写个自己想要的HTML页面臣妾真的办不到啊。

三、w3school是什么？

是什么？你咋不点进去看看呢？

四、我们需要的 HTML 页面

按照w3school的简单教程我们就可以拼凑出我们所需要的页面了，如下图。

HTML 页面

五、我们要实现的5个功能

  • Android Native 端调用 HTML 中的 javascript 脚本
  • Android Native 端调用 HTML 中的 javascript 脚本并传递参数
  • HTML 中的 javascript 脚本调用 Android Native 端的函数
  • HTML 中的 javascript 脚本调用Android Native 端的函数并传递参数
  • HTML 中的 javascript 脚本与 Android Native端的 Java 代码完整交互流程

1、Android Native 端调用 HTML 中的 js 脚本

该例子中Android Native 端的 java 代码会直接调用 HTML 页面中的js 脚本，实现更改 HTML 页面 subtitle 的功能。

Android Native 端的代码为：

mCallJsBtn.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
           mCallJsWithArgsBtn.setText("Native调用WebView的有参JS脚本");
           mWebView.loadUrl("javascript:changeDemoSubtitle()");
       }
   });

HTML 对应的 js 方法是：

function changeDemoSubtitle(){
document.getElementById("subtitle").innerHTML="我加了点料";
}

2、Android Native 端调用 HTML 中的 js 脚本并传递参数

Android Native 端的代码为：

mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("参数为：" + showDevInfo());
            showDevInfoToH5();
        }
    });
    private String showDevInfo() {
    return "showDevInfo('手机型号:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

HTML 对应的 js 方法是：

function showDevInfo(info){
document.getElementById("subtitle").innerHTML=info;
}

3、HTML 中的 javascript 脚本调用 Android Native 端的函数

HTML 对应的 js 方法是：

function disp_confirm(){
    confirm();
}

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

4、HTML 中的 javascript 脚本调用Android Native 端的函数并传递参数

HTML 对应的 js 方法是：

function disp_confirm_with_args(message){
    confirm(message);
    }

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的参数message：" + message, Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

5、HTML 中的 javascript 脚本与 Android Native端的 Java 代码完整交互流程

HTML 对应的 js 方法是：

function disp_confirm_with_args(message){
    confirm(message);
    }
    <input type="button" onclick="disp_confirm_with_args('getDevInfo')" value="点击获取用户手机信息"/>

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } 
            }
            result.confirm();
            return true;
        }
    });
    private String showDevInfo() {
    return "showDevInfo('手机型号:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

Android Native 端代码完整展示：

Activity 代码：

public class MainActivity2 extends Activity {

private WebView mWebView;
private Button mCallJsBtn;
private Button mCallJsWithArgsBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_2);
    initView();
    initWebView();
}

private void initView() {
    mWebView = (WebView) findViewById(R.id.webview);
    mCallJsBtn = (Button) findViewById(R.id.call_js_without_args_btn);
    mCallJsWithArgsBtn = (Button) findViewById(R.id.call_js_with_args_btn);

    mCallJsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("Native调用WebView的有参JS脚本");
            mWebView.loadUrl("javascript:changeDemoSubtitle()");
        }
    });

    mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("参数为：" + showDevInfo());
            showDevInfoToH5();
        }
    });
}

private void initWebView() {
    //开启JavaScript功能
    mWebView.getSettings().setJavaScriptEnabled(true);
    //加载本地html
    mWebView.loadUrl("file:///android_asset/JsDemo.html");

    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } else if (TextUtils.isEmpty(message)) {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的参数message：" + message, Toast.LENGTH_SHORT).show();
            }
            //回调通知H5页面用户操作已完成，可以再次点击相关按钮
            result.confirm();
            //设为true，可以消耗掉H5页面的confirm弹窗。
            return true;
        }
    });
}

private String showDevInfo() {
    return "showDevInfo('手机型号:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
        mWebView.loadUrl("javascript:" + showDevInfo());
    }
}

XML 代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#000000"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="Android_Native"
        android:textColor="#FFFFFF" />

    <Button
        android:id="@+id/call_js_without_args_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Native调用WebView的JS脚本" />

    <Button
        android:id="@+id/call_js_with_args_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        android:text="Native调用WebView的有参JS脚本" />
</LinearLayout>

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFFFFF"
    />
</LinearLayout>

AndroidManifest 文件

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="cn.mtalks.jsbridgedemo">
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MainActivity2"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>

        </activity>
    </application>
</manifest>

友情提示

其实在JavaScript调用 Java本地方法，谷歌官方的实现方法应该是使用 JavascriptInterface 方式。但是该方式在 Android4.2版本之前存在安全漏洞，感兴趣的看这里。在Android4.2版本之后加入了@JavascriptInterface注解才得以解决，考虑到目前 Android 版本碎片化太严重，使用JavascriptInterface并不适合，这也是上篇文章没把它放入效率对比的原因。

以上就是一个完整的 WebView 与 JavaScript 的交互例子。大家可以自己动手试试上篇文章介绍的ShouldInterceptRequest方式来实现这个例子。

Jack-Chan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android WebView详解和调用JS，androidrom开发书籍
m0_64319112的博客
11-26 948
} （3）创建一个自己的WebViewClient，通过setWebViewClient关联 //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为，使网页用WebView打开 mWebView.setWebViewClient(new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { //返回值是true的时候控制去WebView打开，为false调用系
android webview javascript不执行,WebView中的JavaScript为什么不执行?
weixin_35701002的博客
05-26 930
浏览器未开启javascript使用的js代码有问题，webview不兼容该代码。1) 第一个坎：WebSettingsWebSettings webSettings = mWebView.getSettings();webSettings.setJavaScriptEnabled(true);2) 第二个坎： 有物在运行脚本前，要有document对象，至少得load一个空白页webView.l...
Android WebView Java与JavaScript的交互
jingkang0703的专栏
05-20 445
最近工作中为了赶进度，在项目中使用了WebView组件，用到了html与java的数据交互，也就是javascript与java的数据交互，本文即介绍了在应用中添加WebView，以及js如何与java进行数据的交互。 1、在应用中添加WebView 在layout中引入控件 <LinearLayout xmlns:android="http://schemas.android.com/ap
安卓内嵌 webview 不能执行 javascript 的原因
qhexin的专栏
11-06 6070
  安卓内嵌 webview 不能执行 javascript 的原因: webview 的设置不对。在 RN 框架里面使用的webview 默认设置是不会有这个问题的。所以不用怎么怀疑RN的配置。可检查的参数 settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true); ...
安卓中webview与javascript的交互
yinzhijiezhan的专栏
05-26 614
当我们要实现丰富的图文混排效果的时候，我们一般会使用webview，这是一个功能十分强大的的控件，来看看官方的解释： A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online conte
Android webview和js互相调用
u013023845的博客
08-20 507
记录一下，避免忘记； 首先对webview进行初始化设置 WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); //设置编码 settings.setDefaultTextEncodingName("utf-8"); webView.addJavascriptInterface(new JsInteration(), "control"); webView.setWebChromeClient(.
Android webview中JavaScript与Java方法的相互调用Demo
nmyangmo的专栏
11-14 1313
阅读博客前，希望大家对webview有一定了解，此博客只解决JavaScript和Java之间的相互调用。 意义：JavaScript和java语言彼此可以利用对方的方法，彼此可以互传数据 test.html代码： <!DOCTYPE HTML> <html> <head> <meta charset="utf-8...
WebView与Android方法互相调用
再也不做的事
10-09 940
Android调用js 首先设置webview支持JavaScrip WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true); 2.使用loadurl 调用js方法 webView.loadUrl("javascript:mMethord()"); 也可以使用evaluateJavascript if (version >= Build.VERSION_CODES.KIT
Android WebView 和 javaScript的互相调用(二)
JackChan
10-05 781
Android WebView 和 javaScript的互相调用(一) Android WebView 和 javaScript的互相调用(二) Android WebView 和 javaScript的互相调用(三)
Android webview和js互相调用实现方法
01-20
Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5具有开发速度快，更新不用...
Android中实现WebView和JavaScript的互相调用详解
01-04
使用H5开发Android的UI界面，最重要的就是如何实现Js代码和Java代码之间的互相调用了 在讲解之前，让我们先把项目跑起来 效果图： 准备好index.html文件，将它放入Android工程下的assets文件夹中： <!...
android webview中使用Java调用JavaScript方法并获取返回值
10-24
主要介绍了android webview中使用Java调用JavaScript方法并获取返回值,本文直接给出代码示例,需要的朋友可以参考下
Day43
最新发布
m0_67496588的博客
06-20 530
JSON，Ajax
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1497
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
工具链--nuxt框架 简介（一）
qq_35876316的博客
06-16 353
Nuxt框架是一个基于Vue.js的服务器端渲染（SSR）框架，旨在提供一套完整的前端开发解决方案，帮助开发者构建高性能、可扩展的Web应用。是一个功能强大、易于使用的Web开发框架，适用于多种开发场景和需求。Nuxt框架建立在Vue.js之上，它抽象出了管理异步数据、中间件和路由所涉及的大部分复杂配置。Nuxt不仅继承了Vue.js的所有优点，如易用性、灵活性等，还与Node.js紧密集成，使得开发者可以在项目中轻松地使用Node.js的各种功能。
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
mqiqe的专栏
06-14 338
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 898
Vue在表单校验中trigger属性指定何时触发校验规则
Vue3：解决在main.ts 中调用自定义的js文件会报错的问题
SUMMERENT的博客
06-14 176
案例：Vue3 ，使用的是main.ts ，在main.ts 中调用自定义的ruoComment.js文件会报错，解决报错：找到tsconfig.json文件。//1.将输出结构重定向到目录。,//2.编译时允许有js }加上如下代码：即可解决问题。,//3.添加路径支持js。
android studio 中使用webview 调用相机和相册
05-28
在 Android Studio 中使用 WebView 调用相机和相册，需要使用 Android 系统提供的 WebChromeClient 和 WebViewClient 类。具体步骤如下： 1. 首先在 AndroidManifest.xml 文件中添加以下权限： ```xml ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值