Android WebView和JS交互

最新推荐文章于 2024-07-04 17:32:15 发布
最新推荐文章于 2024-07-04 17:32:15 发布
阅读量396 收藏
点赞数
分类专栏： Android 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/androidresearch/article/details/45936317
版权
基本思路,


使用WebView加载一个包含js的本地html,html中包含一个输入框,一个按钮,还有一个Label.
点击html中的按钮,将输入框中的值传给Android 通过toast显示出来,随后,Android调用

html中的Label,将其文本设置为输入值.

以下是html内容:

<html>
<head>
<script type="text/javascript">
	function toClient() {
	var theinput = document.getElementById("theinput");
	javascript:test.dealOrderFromJs(theinput.value);
	}
	function ClientCallMe(str) {
	var label = document.getElementById("fromClient");
	label.innerText=str;
	}
</script>
</head>
<body>
	order:
	<input id="theinput" /><br>
	<input type="button" value="click me" οnclick="toClient();" /> <br>
	result from client:
	<label id="fromClient"></label>
</body>

</html>

将这个html 命名为test.html 并保存在assets文件夹下.


在MainActivity中,定义Android对JS的接口类: 

@ViewInject(R.id.tv) //使用xUtils习惯了,其实就是findViewByID ....
public WebView tv;   

private Handler mHandler = new Handler();

final class ClientInterface
{
	@JavascriptInterface     // Android4.2以上版本,需要在接口函数加上这个注解,据说是为了安全
	public void dealOrderFromJs(final String order)
	{
		
		Toast.makeText(getApplicationContext(), "javascript:ClientCallMe "+order+" \"client reviewed\")", Toast.LENGTH_SHORT).show(); //显示html中传来的值
		mHandler.post(new Runnable() {
			@Override
			public void run() {
				// TODO Auto-generated method stub
				tv.loadUrl("javascript:ClientCallMe(\""+order+" client reviewed\")");//调用JS中的函数给Label设置文本
			}
		});
		
	}
}

在MainActivity的onCreate函数中加入下面初始化语句: 

ViewUtils.inject(this);//如果用xUtils,加上这句,或者tv = (WebView)findViewById(R.id.tv);
tv.getSettings().setJavaScriptEnabled(true); //允许webview加载JavaScript
tv.addJavascriptInterface(new ClientInterface(), "test");//添加自定义的接口类
tv.loadUrl("file:///android_asset/test.html"); // 加载本地html, 注意,有三个斜杠

至此,一个最简单的交互就展现出来了.


学习Android和JS交互中遇到的问题:
1.由于对JS语言不熟悉, 网上有人先导入了JQuery,然后直接引用控件的id,
  例如: var btn = $("#id"), 我由于没有导入JQuery但是却采用了这种形式,
  导致出现JS语法问题,虽然apk运行不报错,但是Button点击后,就是没有响应.

2.Android与JS交互练习,点击Button没有响应时,应该仔细检查Js脚本.

3.程序需要访问网络的权限


轻度强迫症患者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
android WebView与js交互
Zhang_Paradise的博客
08-19 258
最近项目中需要用到android和js的交互 重点：必须和前端共同进行调试、参数定义一致（还有缓存特别严重，注意清除缓存） 1、初始化（看需求而定） WebView wView = findViewById(R.id.web_view); WebSettings webSettings = wView.getSettings(); //允许js弹窗 webSettings.setJ...
Android通过WebView与JS交互
小猪的博客
02-20 3287
我们知道，大前端时代已经来了！不管是网页web，还是移动端，通过前端的知识基本都可以解决需求问题。作为一名靠Android平台吃饭的程序员，的确有了些许压力。不过也不用太紧张，个人观点觉得最近几年都是ok的，问题不大。目前市场上流行的做法是，在app的基础上，与HTML相结合，实现嵌套交互的效果。因为，大部分应用，都是需要通过用户来实现收益的，因此经常会推出活动来推广运营。这样的情况下，如果每次都...
基础巩固（五）Android通过WebView与Js交互
芸兮的博客
06-02 3114
WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。显示和渲染web界面直接使用html文件（网络上或者本地asset）作为布局可与JavaScript交互调用WebView控件功能强大，除了具有一般View的属性和设置外，还可以对url请求、页面加载、渲染、页面交互进行强大的处理。
Android—WebView与JS交互
#请假条的博客
11-24 3031
Html文件： WebView与JS交互方式： 1. 前提： WebSettings webSettings = webView.getSettings(); // 设置与Js交互的权限 webSettings.setJavaScriptEnabled(true); webView.setWebChromeClient(new WebChromeClient(){ @Override public boolean onJsAlert(WebView view, String u
Android WebView详解和调用JS
最新发布
2401_84434086的博客
07-04 551
);（2）如果希望浏览的网页后退而不是退出浏览器，需要WebView覆盖URL加载，让它自动生成历史访问记录，那样就可以通过前进或后退访问已访问过的站点。/**在onKeyDown中设置webView在返回的时候自动记录浏览记录@return*/@Override}else {finish();（3）创建一个自己的WebViewClient，通过setWebViewClient关联。
android webview与js交互(动态添加js)，最详细的解释小白也能听懂
2401_83739411的博客
03-24 1421
现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水，赶快领取吧！Android架构视频+BAT面试专题PDF+学习笔记，或者私信回复【技能提升】即可获取！
Android中使用WebView与JS交互全解析
Android 开发架构
10-26 2039
而这个登录界面是我们native维护的。当你在图1的界面，点击第一个按钮时，会打开图2的对话框，点击第二个按钮时，会打开图3的对话框，同时在这里点击确定，会跳转到另一个页面，当点击第三个按钮时，会打开图4对话框，并且可以输入内容。大家可以想象一下针对于同一个活动，如果使用纯native的开发方式，Android和iOS两边都要维护同一套界面甚至是逻辑，这样开发和维护的成本会很大，而使用hybrid的开发方式的话，让前端的同学去写一套界面和逻辑，对于native端来说只要使用对应的。
Android AgentWeb WebView 与js交互总结
w风雨无阻w的专栏
06-09 2939
想必熟悉android开发的同学都知道使用原生 webview 与js 的交互方式，下面我们先来回顾一下。webview 通过addJavascriptInterface 进行对象映射首先要打开交互权限 , 允许使用javascript说明：以上“ JsInterface ”、“android” 都可以自己命名，这里仅做为示例。那么使用 AgentWeb的Webview和js 的交互方式，你知道吗？其实和原生webview与js的交互还是有些出入的，接下来，我们以代码进行详细说明。根据。
Android高级应用源码-Android webView和js交互的Demo.rar
12-17
这份"Android高级应用源码-Android webView和js交互的Demo"就为我们展示了如何实现这种交互。 首先，我们需要了解`WebView`的基本用法。在Android中，我们通过`WebView`类来创建一个可以浏览网页的视图。例如，我们...
Android webview和JS交互
02-17
// 创建一个Java对象，用于与JavaScript交互 Object myObject = new Object() { @JavascriptInterface public void doSomething(String data) { // 在这里处理来自JavaScript的调用 } }; // 使用...
Android高级应用源码-Android webView和js交互的Demo.zip
10-14
这个Demo项目是学习和实践Android WebView与JavaScript交互的一个好资源，可以帮助开发者掌握如何在Android应用中嵌入网页并实现双向通信，提升用户体验。通过分析和运行此源码，开发者可以深入理解Android WebView...
Android webView和js交互的Demo
05-13
JavaScript交互是通过`WebView`的`addJavascriptInterface()`方法实现的。此方法允许我们将Java对象暴露给网页中的JavaScript代码，以便它们可以调用Java方法。例如，我们可能创建一个名为`Bridge`的Java对象，并...
Android WebView与JS交互全面详解(小结)
08-28
本篇文章将从Android WebView与JS交互的基本概念开始，详细介绍Android WebView与JS交互的各种方式、方法和技术细节，旨在帮助开发者更好地理解和掌握Android WebView与JS交互的技术。 一、Android WebView与JS交互...
Android WebView与JS的交互方式
weixin_42602900的博客
03-21 2644
Android WebView与JS的交互方式
Android WebView与 JS 的交互方式
xuyin1204的博客
08-04 427
参考. 1. 交互方式总结 Android与JS通过WebView互相调用方法，实际上是： Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于Android调用JS代码的方法有2种： 通过WebView的loadUrl（） 通过WebView的evaluateJavascript（） 对于JS调用Android代码的方法有3种： 通过WebView的addJavascriptInterface（）进行对象映射 通过 WebViewClient
Android WebView使用方法详解 附js交互调用方法
weixin_42602900的博客
03-09 4130
Android WebView使用方法详解 附js交互调用方法
Android -- WebView 与 JS 交互方式总结
一只驴在敲代码
12-21 2697
前言 现在很多App都选择混合开发模式，即App内置Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等 App中加载网页是由Android的WebView实现的，其中涉及到Android客户端与Web网页交互的实现 下面是对 Android通过WebView与JS交互 的总结 1. 交互方式总结 Android与JS通过WebView互相调用的方法，实际上是： A...
最全面总结 Android WebView与 JS 的交互方式
Android_xiong_st的博客
03-29 411
https://www.jianshu.com/p/345f4d8a5cfa
android webview与js 交互
05-15
Android WebView 是一个能够在 Android 应用程序中嵌入网页的组件，它可以开发出能够与 Web 页面进行交互的应用。其中与 Web 页面进行交互的一种方法是与 JavaScript 进行交互。下面简要解释一下 Android WebView 与 JS 交互的方式。 1. 加载本地 HTML 文件 在 Android WebView 中加载本地 HTML 文件时，需要使用 loadUrl() 方法加载。HTML 文件中的 JavaScript 可以通过 WebView 提供的 addJavascriptInterface() 方法注册为 Java 中的一个对象，然后在 Java 中调用该对象的方法，即可实现 JS 与 Java 的交互。 2. 加载远程 Web 页面 在 Android WebView 中加载远程 Web 页面时，需要添加 WebViewClient 和 WebChromeClient，分别是用来管理 WebView 的网络请求和处理页面上的 JavaScript 弹窗等请求。 在远程 Web 页面上，JS 代码可以通过 WebView 提供的 addJavascriptInterface() 方法注册为 Java 中的一个对象，然后在 Java 中调用该对象的方法，即可实现 JS 与 Java 的交互。 同时，在 Android 中处理 JS 的事件需要通过 JavaScriptInterface 向 WebView 注册一个映射对象，来实现 JS、Java 相互调用的机制，静态 HTML 文件是通过 WebView 中的 evaluateJavascript() 方法来调用 JS，来实现双向通信和数据交互。 总结来说，Android WebView 与 JS 交互的方式主要是通过 WebView 提供的 addJavascriptInterface() 方法注册为 Java 中的一个对象，然后在 Java 中调用该对象的方法，来实现 JS 和 Java 的交互。同时，JS 也可以通过 WebView 的 evaluateJavascript() 方法来调用 Java 中的方法，实现双向通信和数据交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值