浅谈下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. Prompt 指北：如何写好 Prompt，让 GPT 的回答更加精准

    目录 1. 得亏 GPT 脾气好 2. 玩 GPT 得注意姿势 3. 指南指北指东指西 3.1 首先你得理解 GPT 是咋工作的 3.2 "Prompt 工程"走起 3.3 奇淫技 ...

  2. Python 网页爬虫原理及代理 IP 使用

    一.Python 网页爬虫原理 Python 是一种高效的编程语言,在 Web 开发和数据分析领域广受欢迎.Python 的优秀模块使其更加适合大规模数据处理和 Web 服务的编程.网络爬虫是 Pyt ...

  3. mpi转以太网连接300PLC在气动系统中的应用

    mpi转以太网连接300PLC在气动系统中的应用 某企业装备有限公司 摘要 工业通讯迅速发展的今天,MPI转以太网通讯已经发展为成熟,稳定,高效通讯 方式,兴达易控自主研发的MPI转以太网模块MPI- ...

  4. Trie字典

    Trie树,又叫字典树,前缀树(Prefix Tree),单词查找树,是一种多叉树的结构. {"a","apple","appeal",&q ...

  5. C#计数排序算法

    前言 计数排序是一种非比较性的排序算法,适用于排序一定范围内的整数.它的基本思想是通过统计每个元素的出现次数,然后根据元素的大小依次输出排序结果. 实现原理 首先找出待排序数组中的最大值max和最小值 ...

  6. 基于GPS定位和人脸识别的作业识别管理系统

    一.技术参数 mysql5.5 asp.net jquery 高德地图api 百度人脸识别api 二.功能简介 实现简单的施工项目管理,包括项目地点,工期,名称,编号等 实现作业人员的档案信息管理,包 ...

  7. jenkins 原理篇——pipeline流水线 声明式语法详解

    大家好,我是蓝胖子,相信大家平时项目中或多或少都有用到jenkins,它的piepeline模式能够对项目的发布流程进行编排,优化部署效率,减少错误的发生,如何去写一个pipeline脚本呢,今天我们 ...

  8. Python 轻松生成PDF文档

    PDF(Portable Document Format)是一种常用的文档格式,具有跨平台兼容性.保真性.安全性和交互性等特点.我们日常生活工作中的合同.报告.论文等通常都采用PDF格式,以确保文档在 ...

  9. 工控机中部署Ubuntu 22.04 系统

    1.下载Ubuntu系统服务器版本 获取Ubuntu服务器版 | Ubuntu 2.下载启动盘制作工具 UltralSO(试用就可以) 文件 > 打开(Ubuntu.ISO) > 启动 & ...

  10. 欧拉序求LCA

    使用欧拉序 st 表 O(1) 求 LCA 欧拉序 st 表求 LCA 一开始是从某篇题解里看到的,后来百度了一下就会了( 这是一种预处理 O(nlogn) ,查询 O(1) 的优秀算法. 什么是欧拉 ...