浅谈下webview与js的交互,项目中因为需要获取页面中的许多属性,所以用到了这些,让后端在方法中传了过来.

　　下面的demo是本地的html代码,具体可以仿写,都差不多,注重思想.

　　1:项目目录

　　

　　2:jump的代码

　　

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

<script type="text/javascript">

//Java调用JS代码无参数

function javacalljs(){

	 document.getElementById("content").innerHTML +=

         "<br\>java调用了js函数";

}

//Java调用JS代码有参数

function javacalljsparam(param){

	 document.getElementById("content").innerHTML +=

         "<br\>java调用了js函数含参数param"+param;

}

function testFunc(){

	window.WebViewFunc.jsCallWebView();

}

</script>

<title>测试页面</title>

</head>

<body>

<a onClick="testFunc()">无参数JS调用java代码</a><br/> <br/> <br/>

<a onClick="window.WebViewFunc.jsCallWebView('含有参数')">含参数调用java代码</a><br/>

<br />

<div id="content">内容显示</div>

</body>

</html>

　　3:web的代码

　　

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

<script type="text/javascript">

//Java调用JS代码无参数

function javacalljs(){

	 document.getElementById("content").innerHTML +=

         "<br\>java调用了js函数";

}

//Java调用JS代码有参数

function javacalljsparam(param){

	 document.getElementById("content").innerHTML +=

         "<br\>java调用了js函数含参数param"+param;

}

function testFunc(){

	window.WebViewFunc.jsCallWebView();

}

</script>

<title>测试页面</title>

</head>

<body>

<a onClick="testFunc()">无参数JS调用java代码____________</a><br/> <br/><br/>

<script>

function doIt() {

	var param = '{\"action\":\"webview\",\"infotype\":\"G1\",\"fromurl\":\"http://m.nearbar.com/m/nad/adclick.jsp?sid=3&adid=43&a=11010805&xid=0&ruid=87120\",\"title\":\"光明纯牛奶\",\"digest\":\"新鲜我的生活\",\"headimgs\":\" http://upload.nearbar.com/photos/1101/G1/0/43_1469154394009.jpeg\"}';

	window.WebViewFunc.jsCallWebView(param);

}

</script>

<a onClick="doIt()">含参数调用java代码--------</a><br/>

<br />

<div id="content">内容显示 <a href="jump.html" target="_self">跳转新页面jump.html</a></div>

</body>

</html>

　　4:这里需要注意一点,当参数是一个json串时,格式需要格外注意,尤其是,需要在调用是参数需要加上单引号,如果是后端的html或者jsp代码时,需要注意编码.

　　5:MJavascriptInterface的代码

　　

public class MJavascriptInterface {

	private Context context;

	public MJavascriptInterface(Context context) {

		super();

		this.context = context;

	}

	/**

	 * JS调用Android(Java)无参数的方法

	 */

	@JavascriptInterface

	public void jsCallWebView() {

		Toast.makeText(context, "JS Call Java!",

				Toast.LENGTH_SHORT).show();

	}

	/**

	 * JS调用Android(Java)含参数的方法

	 * @param param

	 */

	@JavascriptInterface

	public void jsCallWebView(String param) {

		Toast.makeText(context, "JS Call Java!" + param,

				Toast.LENGTH_SHORT).show();

	}

}

　　6:主界面webview加载jump的代码.

　　　　

//添加JS调用Android(Java)的方法接口
MJavascriptInterface mJavascriptInterface = new MJavascriptInterface(getApplicationContext());
webView.addJavascriptInterface(mJavascriptInterface,"WebViewFunc");

　　这里需要注意,android2.3之后, JavascriptInterface需要加上注解.

　　另外别忘了添加setJavaScriptEnabled(true);

　　

浅谈webview与js交互的更多相关文章

  1. webview与js交互（转）

    原文:http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html 对于android初学者应该都了解webView这个组件.之前我也是 ...

  2. 浅谈WebView的使用 js alert

    http://blog.csdn.net/liuhe688/article/details/6549263 WebView是Android中一个非常实用的组件,它和Safai.Chrome一样都是基于 ...

  3. webView和js交互

    与 js 交互 OC 调用 JS // 执行 js - (void)webViewDidFinishLoad:(UIWebView *)webView { NSString *title = [web ...

  4. iOS webView与js交互在文本空格上输入文字

    项目要求:webview加载html网址,内容为填空题型文本,需要在横线上添加答案,并点击提交按钮后再将答案进行回显 正常加载的效果图片: 这个是用js交互后的效果图: 点击空格,输入想输入的答案,如 ...

  5. webview与js交互

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

  6. [android] WebView与Js交互

    获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置j ...

  7. Android Webview 与JS交互

    Android中 WebView控件支持JS与本地代码的交互. // 是否允许在webview中执行javascript webSettings.setJavaScriptEnabled(true); ...

  8. Android中使用WebView与JS交互全解析

    1.概述首先,需要提出一个概念,那就是hybrid,主要意思就是native原生Android和h5混合开发.为什么要这样做呢?大家可以想象一下针对于同一个活动,如果使用纯native的开发方式,An ...

  9. Android原生webview中js交互

    http://www.cnblogs.com/android-blogs/p/4891264.html Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中, ...

  10. swift-初探webView与JS交互

    公司接下来的项目需要用swift内嵌h5来实现, 以前没有做过swift项目, 现在慢慢将所学的一点一滴记录一下 一个是怕自己忘了- =, 再就是希望大家看到能帮助我哈哈哈 前几天想要直接用swift ...

随机推荐

  1. DevOps ｜研发效能之环境、程序、配置、SQL变更管理

    本文主要是讲如何建立有效的环境.程序.配置.SQL变更和管理平台. ​几天前和一个朋友聊到环境.程序的配置变更,SQL变更和整个上线流程.之前我们在这块也做了很多,有做的好的也有做的一般的,借机都总结 ...

  2. CEMS大学生综合测评管理系统

    功能介绍 登录 首页 修改密码 提交申请 提交列表 数据可视化 审核列表 前端 components结构 搭建Vue项目 ​ Vue3快速上手: ​ https://cn.vuejs.org/guid ...

  3. 最接地气的.NET微服务框架

    前言: "人必有所执,方能有所成",从2018年底我就开始规划要写一个.NET微服务框架,5年了,今天终于正式发布了. 正文: Wing 致力于打造一个功能强大.最接地气的.NET ...

  4. HTML一键打包EXE工具1.9.9发布 (包含最新版下载地址）

    HTML一键打包EXE工具(HTML封装EXE,桌件)是一款能将任意HTML项目(网址)打包为单个EXE文件的工具,无需依赖浏览器和服务器,直接双击即可运行.该工具支持多种HTML项目类型,包括KRP ...

  5. Record -「NOIP-S 2020」赛后总结

    不是特别想说伤心的事情. T1 一遍过完所有大样例,此时只过去了十几二十分钟,不过之前花了半个小时通读了整个 PDF 所以此时大概过了 1h. T2 大概花了十几分钟胡出了一个反着枚举就是正解的 n^ ...

  6. TCP连接的关键之谜：揭秘三次握手的必要性

    TCP 连接建立 当我们浏览网页.发送电子邮件或者进行在线游戏时,我们常常不会想到背后复杂的网络连接过程.然而,正是这些看似不起眼的步骤,确保了我们与服务器之间的稳定通信.其中最重要的步骤之一就是TC ...

  7. MySQL到TiDB：Hive Metastore横向扩展之路

    作者:vivo 互联网大数据团队 - Wang Zhiwen 本文介绍了vivo在大数据元数据服务横向扩展道路上的探索历程,由实际面临的问题出发,对当前主流的横向扩展方案进行了调研及对比测试,通过多方 ...

  8. Django框架——模板层

    文章目录 1 模板层 一 模版简介 二 模版语法之变量 views.py html文件 三 模版之过滤器 语法: default length filesizeformat date slice tr ...

  9. Spring @ConfigurationProperties Yaml语法配置List和Map：List<String>、List<Obj>、List<List<Obj>>、Map<String,String>、Map<String,List<String>>、Map<String,Obj>、Map<String,List<Obj>>

    yaml语法 数据结构可以用类似大纲的缩排方式呈现,结构通过缩进来表示,连续的项目通过减号"-"来表示,map结构里面的key/value对用冒号":"来分隔. ...

  10. acwing第75场周赛

    这次题比较水,但是还是没能ak,自己小结一下吧 第一道题就是自己枚举相加就行 第二道题是一个多关键字排序,wa了几次,是因为优先级有两个是相同的需要特判一下,然后可以把字符转化为数字的优先级,我用了一 ...