安卓webview和h5交互

先上html的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>安卓和js交互demo</TITLE><meta charset="utf-8"></HEAD><script> function giveAndroidData(content){var str = navigator.userAgent;if(str.indexOf("androidToJsDemo") != -1){android_js.giveAndroidData(content);} }function getAndroidData(){var str = navigator.userAgent;if(str.indexOf("androidToJsDemo") != -1){alert("获取到安卓数据：" + android_js.getAndroidData());}}  function getData(content){alert("安卓调用了js的getData()方法，js拿到安卓传过来的数据："+content);return 'bcd';}</script><BODY><button type="button"  onclick="giveAndroidData('js调用了安卓的方法，给安卓传了数据')">调用安卓方法，给安卓传数据</button><br/><br/><button type="button"  onclick="getAndroidData()">调用安卓方法，获取安卓数据</button></BODY>
</HTML>

为了方便各位测试，上面的html代码我放到了自己的腾讯云服务器上，地址：http://123.206.81.43:8080/demo/androidToJsDemo.html

主要有两个按钮，都是js主动调用安卓方法，一个是给安卓传数据，另一个是获取安卓数据。

然后看一下安卓布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><WebViewandroid:id="@+id/webView"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:onClick="getDataFromJs"android:text="安卓调用js方法" />
</LinearLayout>

就一个webview和button，很简单

接下来看一下webview对应的activity代码：

import android.graphics.Bitmap;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;public class MainActivity extends AppCompatActivity {private static final String TAG = "MainActivity";private WebView mWebView;private final String url = "http://123.206.81.43:8080/demo/androidToJsDemo.html";@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mWebView = findViewById(R.id.webView);WebSettings settings = mWebView.getSettings();settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");settings.setJavaScriptEnabled(true);// 表示支持jssettings.setJavaScriptCanOpenWindowsAutomatically(true);mWebView.addJavascriptInterface(this, "android_js");mWebView.setWebViewClient(new WebViewClient() {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);Log.e(TAG, "onPageStarted");}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);Log.e(TAG, "onPageFinished");}});//不加这个，js中的alert就不会正常显示，webview只是一个承载体,各种内容的渲染需要使用webviewChromClient去实现,所以set一个默认的基类WebChromeClient就行mWebView.setWebChromeClient(new WebChromeClient() {@Overridepublic void onReceivedTitle(WebView view, String title) {super.onReceivedTitle(view, title);}});mWebView.loadUrl(url);}public void getDataFromJs(View v) {//安卓调用js的方法,并传过去abcif (Build.VERSION.SDK_INT < Build.VERSION_CODES.KITKAT) {mWebView.loadUrl("javascript:getData('abc')");} else {mWebView.evaluateJavascript("javascript:getData('abc')", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {//会收到js中getData方法的返回值Log.e(TAG, "onReceiveValue: " + value);}});}}@JavascriptInterface //一定注意不要忘记注解public void giveAndroidData(String content) {//js给安卓传数据toast(content);}@JavascriptInterfacepublic String getAndroidData() {//js调用安卓获取数据return "这是js从安卓获取到的数据123456";}public void toast(String s) {Toast.makeText(this, s, Toast.LENGTH_LONG).show();}}

其中，@JavascriptInterface注解标记的方法，是js能调用的方法

mWebView.addJavascriptInterface(MainActivity.this, "android_js");

是在js中定义了一个android_js对象，所以js中才能直接用android_js对象调用方法，一定要记得在js中通过UA判断是不是在安卓APP下，因为浏览器里面不存在这个对象，是安卓APP里面才有，我一般是在安卓默认的UA后面加上一段项目相关的字符串，方便js判断是否处于安卓APP里（settings.setUserAgentString(settings.getUserAgentString() + "androidToJsDemo");），然后js通过判断androidToJsDemo这段唯一字符串是否存在来判断是否在安卓APP：

var str = navigator.userAgent;
       if(str.indexOf("androidToJsDemo") != -1){
           //说明处在安卓APP里，不是在浏览器里，也不是ios里
       }

运行截图：点击H5中第一个按钮时，给安卓传过来字符串，安卓通过toast打印出来，如图：

点击第二个按钮获取安卓的数据，将获取到的数据alert出来：

点击安卓原生按钮，调用js方法，如图：

我用的是安卓8.0的模拟器，点击确定以后，可以看到打印出来了js的返回值：

安卓webview和h5交互相关推荐

react 调用 html5,React-Native Webview 和H5交互的两种方式
React-Native WebView 和H5交互有两种方式: 方式1:RN Webview 向H5注入JS 此方式可作为Webview向H5端传递数据. RN Webview 有以下属性,可以注入 ...
安卓Android与H5双向交互MathJax展示数学公式(源码+解析)
安卓Android与H5双向交互MathJax展示数学公式(源码+解析) 博主就今天周五又做了个需求(安卓Android与H5交互),原来上线的功能是服务器配置过来的学习报告(一个H5页面)并提供原始 ...
安卓混合开发——原生Java和H5交互，保证你一看就懂！
在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的JavaSc ...
Android 与 H5 交互基础普及
文章目录前言创建一个WebView页面 WebView 与 H5交互 H5 调用 WebView 中的方法 WebView 调用 H5 中的方法另外一些重要操作处理页面导航处理页面历史总结 ...
html 如何实现一条竖线边上有刻度_Android H5交互Webview实现localStorage数据存储
先看看效果图吧-- 实现比较简单,但是第一次用可能会遇到一些坑首先得有Webview控件: 有人问我是不是需要写布局文件,不写行不行,现在我就告诉你们,不写没问题,需要写就写不写直接创建New一个也 ...
android webview调js方法,Android中WebView与H5的交互，Native与JS方法互调
项目中经常用到WebView与H5的交互,一个是H5调本地方法,一个是本地调H5方法,在此记录一下. 首先,启用JS支持 //启用js支持 webSettings.setJavaScriptEnabl ...
微信小程序与webview H5交互（内嵌H5跳转原生页面）
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序交互.下面介绍下实现微信小程序与webview H5交互的方法. web-view功能 ...
微信小程序web-view与H5之间交互（含支付）
第一章了解web-view与H5的交互(含支付) 文章目录第一章了解web-view与H5的交互(含支付) 前言一.web-view是什么? 二.使用步骤三.业务场景 1.小程序带参数跳转链 ...
小程序使用web-view实现与H5交互
在小程序端使用web-view内嵌H5网页,web-view通过设置src属性来指定网页即可在小程序中显示.一个页面只能有一个web-view,且会自动铺满整个小程序页面. web-view官方文档: ...

安卓webview和h5交互

安卓webview和h5交互相关推荐

最新文章

热门文章