Android之webview与js交互

对于android初学者应该都了解webView这个组件。之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用webview的一些经验。

 

1、首先了解一下webview。

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.

从上面你应该了解到了基本功能,也就是显示网页。之所以我说webview功能强大是因为它和js的交互非常方便,很简单就可以实现。

 

2、webview能做什么?

①webView可以利用html做界面布局,虽然目前还比较少人这么使用,不过我相信当一些客户端需要复杂的图文(图文都是动态生成)混排的时候它肯定是个不错的选择。

②直接显示网页,这功能当然也是它最基本的功能。

③和js交互。(如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择)。

 

3、如何使用webview?

这里直接用一个svn上取下的demo,先上demo后讲解。demo的结构图如下:


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();@Overridepublic 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 {@Overridepublic 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"/><WebViewandroid:id="@+id/webview"android:layout_width="fill_parent" android:layout_height="0dip"android:layout_weight="1"/></LinearLayout>

4、如何交互?

①android如何调用js。

调用 形式:

mWebView.loadUrl("javascript:wave()");

其中wave()是js中的一个方法,当然你可以把这个方法改成其他的方法,也就是android调用其他的方法。

②js如何调用android。

调用形式:

<a onClick="window.demo.clickOnAndroid()">
代码中的“demo”是在android中指定的调用名称,即

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

代码中的clickOnAndroid()是“demo”对应的对象:new DemoJavaScriptInterface() 中的一个方法。

③双向交互。

当然是把前面的两种方式组合一下就可以了。

 

5、讲解demo。

现在你一定了解了android和js的交互了。是时候分析一些demo了,根据上面讲的你也应该比较清楚了。具体交互流程如下:

①点击图片,则在js端直接调用android上的方法clickOnAndroid();

②clickOnAndroid()方法(利用线程)调用js的方法。

③被②调用的js直接控制html。






本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/295667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java.util.ResourceBundle使用详解

java.util.ResourceBundle使用详解一、认识国际化资源文件这个类提供软件国际化的捷径。通过此类&#xff0c;可以使您所编写的程序可以&#xff1a;轻松地本地化或翻译成不同的语言一次处理多个语言环境以后可以轻松地进行修改&#xff0c;支持更多的语言环境说的简单点&#…

12如何隐藏dock栏_iPhone边框“变色”壁纸,隐藏Dock栏

自从iOS14上线以来&#xff0c;iPhone的玩法真的是花样百出&#xff0c;今天给大家带来一组很有意思的iPhone专用壁纸&#xff0c;不仅拥有色彩边框&#xff0c;还能隐藏主屏界面底部的Dock栏。这组壁纸除了外边框自带颜色以外&#xff0c;锁屏界面的通知栏和底部两个按钮的位置…

微信新功能又来了,这些功能再次打开了我新世界的大门!

全世界只有3.14 % 的人关注了爆炸吧知识微信视频号&#xff0c;是一个人人都可记录和创作的内容平台&#xff0c;也是一个了解他人、了解世界的窗口。在过去一段时间里&#xff0c;视频号可能是微信迭代最多&#xff0c;变化最多&#xff0c;也受到最多关注的功能。内容创作者大…

Processing编译android的apk应用

折腾了3天&#xff0c;总算弄进去了&#xff0c;真麻烦~&#xff01; 成果如下&#xff1a; 转载于:https://www.cnblogs.com/x5115x/archive/2013/04/11/3013593.html

Android之DiskLruCache(缓存工具)

DiskLruCache DiskLruCache是一个十分好用的android缓存工具&#xff0c;我们可以从GitHub上下载其源码&#xff1a;https://github.com/JakeWharton/DiskLruCache DiskLruCache所有的数据都存储在/storage/emulated/0/Android/data/应用包名/cache/XXX文件夹中(你也可以修改&…

内核中根据inode得到文件名_聊聊DOS操作系统中的文件系统FAT12

前面我们更多的集中在Linux系统下文件系统的介绍&#xff0c;是时候介绍一下其它文件系统了。今天我们介绍一下Windows操作系统下的文件系统&#xff0c;也就是FAT文件系统。严格的来说其实是DOS的文件系统。今天我们介绍一下FAT最古老的版本&#xff0c;FAT12文件系统的内容。…

改变世界面貌的十个数学公式

全世界只有3.14 % 的人关注了爆炸吧知识1971年5月15日&#xff0c;尼加拉瓜发行了十张一套题为“改变世界面貌的十个数学公式”邮票&#xff0c;由一些著名数学家选出十个以世界发展极有影响的公式来表彰。这十个公式不但造福人类&#xff0c;而且具有典型的数学美&#xff0c;…

Java开源门户

最近在研究门户&#xff0c;先整理一下开源内容 GateIn&#xff1a; 新的开源门户平台&#xff0c;由RedHat JBoss和eXo平台共同打造。目标是结合强大的企业级Java基础设施和直观友好的用户界面&#xff0c;根据客户的需求&#xff0c;提供最佳的开源门户平台的企业级Java基础设…

.NET 6新特性试用 | 最小Web API

前言如果你使用过其他一些轻量级Web框架&#xff0c;比如Node.JS&#xff0c;你就会知道&#xff0c;创建具有最小依赖项的HTTP API是多么简单&#xff1a;var express require(express) var app express()app.get(/, function (req, res) {res.send(hello My IO!) })app.lis…

Android之SparseArray<E>详解

最近编程时&#xff0c;发现一个针对HashMap<Integer, E>的一个提示&#xff1a; 翻译过来就是&#xff1a;用SparseArray<E>来代替会有更好性能。那我们就来看看源码中SparseArray到底做了哪些事情&#xff1a;一、构造从构造方法我们可以看出&#xff0c;它和一般…

WPF/MVVM 快速开发

http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial 这篇文章醍醐灌顶&#xff0c;入门良药啊&#xff01; Introduction Assuming that you have a decent understanding of C#, getting started in WPF isnt too difficult. I started looking at WP…

钢厂冒的白烟到底有没有污染?东北大学教授的试验结果让你大吃一惊

全世界只有3.14 % 的人关注了爆炸吧知识对于大多数人来讲钢厂的污染首先是来自于冒的气体钢铁企业污染严重的时候烟气有黄烟、黑烟、红烟、褐色烟等和这些烟相比一部分人认为钢厂冒的白烟是水蒸气没有污染另一部分则认为白烟也是污染避之而不及钢厂冒的白烟到底有没有污染呢&am…

IE6下margin-left双倍bug问题

熟悉 CSS 盒模型朋友相信对于 IE 双倍浮动边界 BUG 不会陌生&#xff0c;这个 BUG 只会产生在浮动行的第一个浮动元素&#xff08;此处说法不准确&#xff0c;并不是第一个浮动元素&#xff0c;假如浮动的元素在一行显示不下&#xff0c;占用了多行&#xff0c;那么每一行的第一…

基于事件驱动架构构建微服务第11部分:持续集成

原文链接&#xff1a;https://logcorner.com/building-microservices-through-event-driven-architecture-part12-continuous-integration/在本教程中&#xff0c;我将展示如何设置docker持续集成以在docker容器内构建和运行单元测试。因为我将使用kubernetes在容器中运行微服务…

使用Visual Studio 创建可视Web Part部件

使用Visual Studio 创建可视Web Part部件 可视Web Part部件是很强大的Web 部件。它提供内置设计器创建你的用户界面。本文主要解说怎样使用Visual Studio 创建可视Web Part部件.准备&#xff0c;创建一个自己定义列表Stats&#xff0c;加入某些栏目&#xff0c;填充部分数据。当…

如果在我爸的朋友圈当杠精,会挨揍吗?

1 这位爷爷推这么大力是想换老伴了吧&#xff1f;▼2 撞玻璃门撞出心理阴影的狗子▼3 她和她爸交朋友的方式就是以爸的口吻评论她爸的朋友圈▼4 你们还记得那个学鸭子嘟嘴的小可爱吗&#xff1f;▼5 看看狗子委屈的......▼6 去游个泳&#xff0c;结果收获了一群小鸭子▼…

Git的理解和使用

Git介绍 Git&#xff08;the stupid content tracker&#xff09;是一个源自Linux内核项目的源码管理工具。和传统的CVS、SVN不同&#xff0c;git是一个分布式源码管理工具。 Git命令简单说明git init初始化一个本地的代码仓库。git clone从远程复制一个代码仓库。git configgi…

【v3.6.2】iNeuOS工业互联网操作系统,发布实时存储方式:实时存储、变化存储、定时存储,设备振动状态和电能状态监测驱动...

目 录1. 概述... 12. 平台演示... 23. 存储方式... 24. 设备状态和用电状态监控驱动... 31. 概述本次升级主要增加了对设备实时数据的存储方式、设备振动状态驱动和用电状态监控的驱动&#xff0c;并且优化了部分核心代码。2. 平台演示在线演示&…

查询子串_SQL视图、子查询和常见函数的应用

一、视图含义&#xff1a;虚拟表&#xff0c;和普通表一样使用&#xff0c;通过表动态生成的数据。创建语法的关键字是否实际占用物理空间使用视图CREATE VIEW没有&#xff08;只保存了SQL逻辑&#xff09;增删改查&#xff0c;一般不能增删改表CREATE TABLE占用&#xff08;保…

The application could not be verified

2019独角兽企业重金招聘Python工程师标准>>> //调试的时候出现 The application could not be verified删除已安装的app&#xff0c;再Run 转载于:https://my.oschina.net/liuchuanfeng/blog/550025