android中webview控件和javascript交互实例
作者:junjie 发布时间:2023-09-06 14:09:28
当我们要实现丰富的图文混排效果的时候,我们一般会使用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 content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.
一个能显示网页内容的View。该类是你实现一个自己的浏览器,或者只是在activity中显示网页内容的基础;它基于WebKit内核来显示网页,并且包含了实现前后翻页、放大缩小,文字搜索方法。
从上面你应该了解到了基本功能,也就是显示网页。这篇文章中我们主要讨论webview和Javascript的交互。如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择。
WebView和js的交互包含两方面,一是在html中通过js调用安卓的java代码;二是在安卓java代码中调用js。
一、html中通过js调用java代码
js中调用java代码其实就记住一点,webview设置一个和js交互的接口(注意这里只是一般的意思,并不是java中接口的含义),这个接口其实是一个一般的类,同时为这个接口取一个别名。这个过程如下:
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(),"demo");
new DemoJavaScriptInterface就是这个接口,demo就是这个接口的别名。
上面的代码执行之后在html的js中就能通过别名(这里是“demo”)来调用newDemoJavaScriptInterface类中的任何方法。
如我们想让html中的一个button点击之后调用java中的函数可以这样:
<input type="button" value="click me" onclick="window.demo.clickOnAndroid()"/>
但是因为安全问题,在Android4.2中(如果应用的android:targetSdkVersion数值为17+)JS只能访问带有 @JavascriptInterface注解的Java函数。因此如果你的开发版本比较高,需要在被调用的函数前加上@JavascriptInterface注解。
下面是谷歌给出的代码示例:
WebViewDemo.java
package com.google.android.webviewdemo;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
/**
* Demonstrates how to embed a WebView in your activity. Also demonstrates how
* to have javascript in the WebView call into the activity, and how the activity
* can invoke javascript.
* <p>
* In this example, clicking on the android in the WebView will result in a call into
* the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code
* will turn around and invoke javascript using the {@link WebView#loadUrl(String)}
* method.
* <p>
* Obviously all of this could have been accomplished without calling into the activity
* and then back into javascript, but this code is intended to show how to set up the
* code paths for this sort of communication.
*
*/
public class WebViewDemo extends Activity {
private static final String LOG_TAG = "WebViewDemo";
private WebView mWebView;
private Handler mHandler = new Handler();
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = mWebView.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);
mWebView.setWebChromeClient(new MyWebChromeClient());
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
mWebView.loadUrl("file:///android_asset/demo.html");
}
final class DemoJavaScriptInterface {
DemoJavaScriptInterface() {
}
/**
* This is not called on the UI thread. Post a runnable to invoke
* loadUrl on the UI thread.
*/
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
mWebView.loadUrl("javascript:wave()");
}
});
}
}
/**
* Provides a hook for calling "alert" from javascript. Useful for
* debugging your javascript.
*/
final class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.d(LOG_TAG, message);
result.confirm();
return true;
}
}
}
demo.html
<html>
<script language="javascript">
/* This function is invoked by the activity */
function wave() {
alert("1");
document.getElementById("droid").src="android_waving.png";
alert("2");
}
</script>
<body>
<!-- Calls into the javascript interface for the activity -->
<a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<img id="droid" src="android_normal.png"/><br>
Click me!
</div></a>
</body>
</html>
main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/intro"
android:padding="4dip"
android:textSize="16sp"
/>
<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
/>
</LinearLayout>
二、android调用js
上面的代码在演示如何在js中调用java代码的同时也演示了如何在java中调用js
调用形式:
mWebView.loadUrl("javascript:wave()");
其中wave()是js中的一个方法,当然你可以把这个方法改成其他的方法,也就是android调用其他的方法。
demo的解释:
现在你一定了解了android和js的交互了。是时候分析一些demo了,根据上面讲的你也应该比较清楚了。具体交互流程如下:
①点击图片,则在js端直接调用android上的方法clickOnAndroid();
②clickOnAndroid()方法(利用线程)调用js的方法。
③被②调用的js直接控制html。
个人总结:利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了,而html布局样式之类有DW这样强大的工具,而且网上很多源码,很多代码片。在UI和视觉效果上就会节省很多时间,重复发明轮子没有任何意义。
猜你喜欢
- 开发环境win10Android Studio效果用于多级菜单展示,或选择。如 每个省,市,县;如 树木的病虫害;关键代码 @overrid
- 本文以一个简单的实例形式讲述了C#模板方法模式的实现方法,分享给大家供大家参考。具体实现方法如下:这里假设要做一道红烧肉,做法有很多,在不同
- springboot 引入mybatis-plus后报错:Factory method ‘sqlSessionFactory' th
- Stripe支付首页需要引用Stripe.net框架,我引用的是22.8.0版本,注意.NETFramework的版本为4.5,同时需要引用
- 在我们编程过程中如果需要执行一些简单的定时任务,无须做复杂的控制,我们可以考虑使用JDK中的Timer定时任务来实现。下面LZ就其原理、实例
- 基于 springboot+vue 的测试平台(练手项目)开发继续更新。在接口编辑页中点击发送接口请求,除了显示响应体外,还可以显示响应头等
- 1. 下载myeclipse版本对应的STS插件下载地址:https://spring.io/tools/sts/all2.在myeclip
- 前言日常编码过程中,最重要的技能不是说你学会使用很多最新的编程技术或者做出一个高大上的系统。而是你在写代码过程中,对异常的处理,是否系统可以
- 前言之前采取项目中嵌套html页面,实现基本的登录校验、权限校验、登出操作、记住我等功能试下。但是,现在的开发基本都是前后分离样式,后端并不
- 1、定时器推动整个计算机硬件的发展的核心关键性技术就是时钟。所以在企业开发中定时操作往往成为开发重点。而在JDK本身也支持这种定时调度的处理
- 背景朋友想从XX超市app购买一些物美价廉的东西,但是因为人多货少经常都是缺货的状态,订阅了到货通知也没什么效果,每次收到短信通知进入app
- 方法一:需要调用win32api,winform、wpf通用[DllImport("user32.dll")]publi
- watch机制Zookeeper watch是一种监听通知机制,可以随时监听一些数据的变化,从而实现数据的及时性。Zookeeper所有的读
- 前言现如今几乎大多数Java应用,例如我们耳熟能详的tomcat, struts2, netty...等等数都数不过来的软件,要满足通用性,
- 简介mutable(可变)和immutable(不可变)对象是我们在java程序编写的过程中经常会使用到的。可变类型对象就是说,对象在创建之
- springmvc 中的 * 可以对请求进行判别, 在请求到达控制器之前, 把非法的请求给拦截掉下面来说一说, 它在springboot中的
- 本文实例讲述了C#实现的海盗分金算法。分享给大家供大家参考,具体如下:海盗分金的故事5个海盗抢到了100颗宝石,每一颗都一样的大小和价值连城
- spring xml中配置视图如果是如下<property name="defaultViews"><
- 初级技巧 - 乐观锁乐观锁适合这样的场景:读不会冲突,写会冲突。同时读的频率远大于写。以下面的代码为例,悲观锁的实现:public Obje
- WPF实现一个简单的多运算符表达式计算器,供大家参考,具体内容如下1.先看下效果图首先外围给了一个grid 把他分成了两行 第一行用来显示文