- 浏览: 5777163 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (890)
- WindowsPhone (0)
- android (88)
- android快速迭代 (17)
- android基础 (34)
- android进阶 (172)
- android高级 (0)
- android拾遗 (85)
- android动画&效果 (68)
- Material Design (13)
- LUA (5)
- j2me (32)
- jQuery (39)
- spring (26)
- hibernate (20)
- struts (26)
- tomcat (9)
- javascript+css+html (62)
- jsp+servlet+javabean (14)
- java (37)
- velocity+FCKeditor (13)
- linux+批处理 (9)
- mysql (19)
- MyEclipse (9)
- ajax (7)
- wap (8)
- j2ee+apache (24)
- 其他 (13)
- phonegap (35)
最新评论
-
Memories_NC:
本地lua脚本终于执行成功了,虽然不是通过redis
java中调用lua脚本语言1 -
ZHOU452840622:
大神://处理返回的接收状态 这个好像没有监听到 遇 ...
android 发送短信的两种方式 -
PXY:
拦截部分地址,怎么写的for(int i=0;i<lis ...
判断是否登录的拦截器SessionFilter -
maotou1988:
Android控件之带清空按钮(功能)的AutoComplet ...
自定义AutoCompleteTextView -
yangmaolinpl:
希望有表例子更好。。。,不过也看明白了。
浅谈onInterceptTouchEvent、onTouchEvent与onTouch
现在有很多时候,我们的 App 都进行了混合开发,而最简单,最常用的就是有些网页采用了 WebView 进行展示,这就需要我们了解和懂得如何实现 WebView 和 JS 进行交互。今天我们就来学习一下,如何点击 WebView 中的网页图片,调用原生控件进行放大展示。
其实实现这种交互非常简单,就是通过 JS 调用原生控件。基本思路如下:
1,首先加载一个 html 网页,网址或者本地 html 文件都可以。
2,遍历 html 标签源代码,找到所有的 img 标签节点。
3,给 遍历到得 img 标签节点加上 onClick 事件。
4,通过点击加上的 onClick 事件,通过 JS 调用原生控件,展示放大即可。
实现方法
我们先写一个简单的 html 文件,里面放两张图片。源代码非常简单。代码如下:
写的这个本地的 html 文件,放到 main/assets 目录下即可。
设置 WebView
这一步就是将我们写的 html 本地文件放入到 WebView 中。方法如下:
关键的代码是:
这行代码就是 WebView 与 JavaScript 交互的关键。上面两个参数,一个是 JS 接口,一个是监听函数的名字。
遍历 img 节点,加入监听
这里有行代码注意一下:
这里就是给每个 img 节点加入点击事件,注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 定义的方法名,而 openImage 就是我们自定义的 JavaScriptInterface 中的 openImage 方法。
通过 JS 接口,调用原生控件
这里的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 中的 new JavascriptInterface(this) 对应的。这样我们就通过 JavascriptInterface 就把 JS 和 WebView 之间实现通信了。
其实实现这种交互非常简单,就是通过 JS 调用原生控件。基本思路如下:
1,首先加载一个 html 网页,网址或者本地 html 文件都可以。
2,遍历 html 标签源代码,找到所有的 img 标签节点。
3,给 遍历到得 img 标签节点加上 onClick 事件。
4,通过点击加上的 onClick 事件,通过 JS 调用原生控件,展示放大即可。
实现方法
我们先写一个简单的 html 文件,里面放两张图片。源代码非常简单。代码如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> </head> <body> <h1>显示图片</h1> <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585759664&di=56aa55f480140643a11c134ef8bdae07&imgtype=0&src=http%3A%2F%2Fi2.sanwen8.cn%2Fdoc%2F1610%2F704-161024211H3.jpg' style='vertical-align:middle;' /> <h1>第二张图片</h1> <img src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490585932299&di=9ab54209dc8672cdd45b817ba3b09000&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fbaike%2Fpic%2Fitem%2F5fdf8db1cb134954a4d833a0534e9258d0094a34.jpg' /> </body> <html>
写的这个本地的 html 文件,放到 main/assets 目录下即可。
设置 WebView
这一步就是将我们写的 html 本地文件放入到 WebView 中。方法如下:
mWebView = (WebView) findViewById(R.id.webview); WebSettings webSettings = mWebView.getSettings(); // 设置与Js交互的权限 webSettings.setJavaScriptEnabled(true); // 设置允许JS弹窗 webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //防止中文乱码 mWebView.getSettings().setDefaultTextEncodingName("UTF-8"); // 先载入JS代码 // 格式规定为:file:///android_asset/文件名.html // mWebView.loadUrl("file:///android_asset/image.html"); mWebView.loadUrl("http://www.toutiao.com/a6401738581286682881/#p=1"); //载入js mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
关键的代码是:
mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
这行代码就是 WebView 与 JavaScript 交互的关键。上面两个参数,一个是 JS 接口,一个是监听函数的名字。
遍历 img 节点,加入监听
mWebView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); //这段js函数的功能就是注册监听,遍历所有的img标签,并添加onClick函数,函数的功能是在图片点击的时候调用本地java接口并传递url过去 mWebView.loadUrl("javascript:(function(){" + "var objs = document.getElementsByTagName(\"img\"); " + "for(var i=0;i<objs.length;i++) " + "{" + " objs[i].onclick=function() " + " { " + " window.imagelistner.openImage(this.src); " + " } " + "}" + "})()"); } }); }
这里有行代码注意一下:
window.imagelistner.openImage(this.src);
这里就是给每个 img 节点加入点击事件,注意看这个imagelistenr其实就是 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 定义的方法名,而 openImage 就是我们自定义的 JavaScriptInterface 中的 openImage 方法。
通过 JS 接口,调用原生控件
// js通信接口 public class JavascriptInterface { private Context context; public JavascriptInterface(Context context) { this.context = context; } @android.webkit.JavascriptInterface public void openImage(String img) { Intent intent = new Intent(); intent.putExtra("img", img); intent.setClass(context, ImageActivity.class); context.startActivity(intent); } }
这里的 JavascriptInterface 就是和 mWebView.addJavascriptInterface(new JavascriptInterface(this), "imagelistner") 中的 new JavascriptInterface(this) 对应的。这样我们就通过 JavascriptInterface 就把 JS 和 WebView 之间实现通信了。
发表评论
-
某些android手机获取不到IMEI问题
2018-08-21 14:17 7494某些山寨机可能拿不到IMEI 如果非要IMEI可以模拟一个 ... -
APK安装成功后点击"打开"再按Home键应用会重启的问题
2018-08-21 14:13 2711安装系统SD卡里面的apk或者原有的程序更新版本的时候, ... -
使用volley链接Https地址时报SSLHandshakeException
2018-08-21 14:06 2032在真实设备上出现以下错误 ︰ Volley error: ... -
PhotoView+Viewpager双指缩放的时候出现pointerIndex out of range问题
2017-07-10 14:30 4186PhotoView+Viewpager开发图集效果的时候,在某 ... -
Android6.0权限封装
2017-04-01 12:04 1526简介 Android6.0中对权限分为了一般权限和危险权限。 ... -
Android 方法引用数超过 65535 优雅解决
2017-03-31 09:37 1475随着应用不断迭代更新,业务线的扩展,应用越来越大(比如:集成了 ... -
android引用资源@与属性?备忘单
2017-03-30 10:09 1235几天前我偶然发现了我A ... -
ViewPager 与SwipeRefreshLayout,RecyclerView,ScrollView滑动冲突解决方法
2017-03-30 09:55 6513ViewPager 作为一个横向滚动的控件, 在 ViewGr ... -
Android中一些你可能没注意的小效果实现
2017-02-15 21:09 0http://www.see-source.com/blog/ ... -
Android热修复:Andfix和Hotfix,两种方案的比较与实现
2017-02-15 21:00 0http://www.see-source.com/blog/ ... -
Android 从网页中跳转到本地App
2017-01-11 09:27 1823我们在使用微信、QQ、京东等app的时候,会发现有时候通过他们 ... -
Activity的启动模式和onNewIntent
2016-12-28 09:10 1293一、启动模式介绍 启 ... -
android5.0使用Notification报RemoteServiceException的解决办法
2016-08-31 16:13 11462有时android5.0下使用Notification会报如下 ... -
RecyclerView 中的 item 如何居中问题
2016-05-18 09:52 12394一个很简单的Item布局,我只要让它由上而下排列,文字居中 ... -
sqlite3:not found 解决方法
2015-12-08 16:03 2500最最最重要,先root你的手机吧 sqlite3 为一个可 ... -
隐藏底部虚拟键NavigationBar实现全屏
2015-10-08 17:20 9798import android.app.Activity; ... -
服务端执行慢或网络延迟时,Volley多次发送请求的问题
2015-07-27 15:40 6938原文: Android Volley double post ... -
如何获取 Android 设备的CPU核数、时钟频率以及内存大小
2015-06-30 17:04 4321原帖: http://www.jianshu.com/p/f7 ... -
android点滴5
2015-04-10 17:32 2003一些小效果的实现 http://www.see-source. ... -
SwipeRefreshLayout和ListView的EmptyView共存冲突的问题
2015-01-20 11:47 18566SwipeRefreshLayout是android官方的下拉 ...
相关推荐
NULL 博文链接:https://pickerel.iteye.com/blog/960432
最近公司App项目里要做活动,活动界面是调用H5展示,里面有转盘抽奖、GIF图片等,由于原生的WebView在每个机型上不能保证都能使用(测试了几个机型,有的会显示一个空白界面,不过网页已经加载完成了,就是不显示...
最近因为赶项目进度,因此将本来要用原生控件实现的界面,自己做了H5并嵌入webview中。发现点击H5中 input type=”file” 标签 不能打开android资源管理器。 通过网络搜索发现是因为 android webview 由于考虑安全...
为什么要学习Android与H5互调? 微信,QQ空间等大量软件都内嵌了H5,不得不说是一种趋势。Android与H5互调可以让我们的实现混合开发,至于混合...要实现Android与H5互调,WebView是一个很重要的控件,WebView可以很好
Android原生 webView控件嵌套html页面调用拍照与相册
为了实现与阿里云IoT Studio移动可视化功能的搭配,使用android studio工具,调用腾讯X5浏览器内核,实现了安卓...X5内核稳定高效,可完美替代谷歌原生webview控件。适合物联网开发者且具有安卓开发基础的人下载使用。
初始化的简单的app架构,基于Kotlin+ Material Design + MVP + RxJava2 + Retrofit + ...使用x5WebView做阅览页,比原生WebView体验更佳 使用SVG及其动画实现progressbar的效果 使用RxPermissions做6.0+动态权限适配
(1)针对多窗口类浏览器模式问题,指出并分析了该问题存在的原因,利用Activity的运行机制,通过Fragment栈对主要模块的Webview进行管理,实现对不同模块之间切换的控制。 (2)针对跨域数据交互问题,指出并分析了...
使用x5WebView做阅览页,比原生WebView体验更佳 使用SVG及其动画实现progressbar的效果 使用EasyPermissions做5.0 动态权限适配 使用原生的夜间模式、分享、反馈 包含搜索、收藏、检测更新等功能 所有踩到的坑...
其实很多功能,都是基于安卓的WebView来实现的,以致于后边开发,我了解了移动APP开发中的混合开发,通过特定的框架,和JavaScript代码来实现对安卓原生系统的控制 在代码中,我也借助了很多在GitHub开源的框架辅助...