- 浏览: 5816860 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (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
实现点击 WebView 中的图片,调用原生控件展示图片
- 博客分类:
- android拾遗
现在有很多时候,我们的 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 7617某些山寨机可能拿不到IMEI 如果非要IMEI可以模拟一个 ... -
APK安装成功后点击"打开"再按Home键应用会重启的问题
2018-08-21 14:13 2764安装系统SD卡里面的apk或者原有的程序更新版本的时候, ... -
使用volley链接Https地址时报SSLHandshakeException
2018-08-21 14:06 2126在真实设备上出现以下错误 ︰ Volley error: ... -
PhotoView+Viewpager双指缩放的时候出现pointerIndex out of range问题
2017-07-10 14:30 4241PhotoView+Viewpager开发图集效果的时候,在某 ... -
Android6.0权限封装
2017-04-01 12:04 1569简介 Android6.0中对权限分为了一般权限和危险权限。 ... -
Android 方法引用数超过 65535 优雅解决
2017-03-31 09:37 1537随着应用不断迭代更新,业务线的扩展,应用越来越大(比如:集成了 ... -
android引用资源@与属性?备忘单
2017-03-30 10:09 1286几天前我偶然发现了我A ... -
ViewPager 与SwipeRefreshLayout,RecyclerView,ScrollView滑动冲突解决方法
2017-03-30 09:55 6563ViewPager 作为一个横向滚动的控件, 在 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 1878我们在使用微信、QQ、京东等app的时候,会发现有时候通过他们 ... -
Activity的启动模式和onNewIntent
2016-12-28 09:10 1331一、启动模式介绍 启 ... -
android5.0使用Notification报RemoteServiceException的解决办法
2016-08-31 16:13 11534有时android5.0下使用Notification会报如下 ... -
RecyclerView 中的 item 如何居中问题
2016-05-18 09:52 12528一个很简单的Item布局,我只要让它由上而下排列,文字居中 ... -
sqlite3:not found 解决方法
2015-12-08 16:03 2553最最最重要,先root你的手机吧 sqlite3 为一个可 ... -
隐藏底部虚拟键NavigationBar实现全屏
2015-10-08 17:20 9850import android.app.Activity; ... -
服务端执行慢或网络延迟时,Volley多次发送请求的问题
2015-07-27 15:40 6991原文: Android Volley double post ... -
如何获取 Android 设备的CPU核数、时钟频率以及内存大小
2015-06-30 17:04 4379原帖: http://www.jianshu.com/p/f7 ... -
android点滴5
2015-04-10 17:32 2046一些小效果的实现 http://www.see-source. ... -
SwipeRefreshLayout和ListView的EmptyView共存冲突的问题
2015-01-20 11:47 18640SwipeRefreshLayout是android官方的下拉 ...
相关推荐
本篇文章将详细探讨如何在Android和iOS平台上,利用原生的日期选取控件(`DatePicker`)在`WebView`中实现用户友好的日期选择。 ### Android 平台 在Android中,我们可以使用`WebView`的`addJavascriptInterface`...
()">点击显示原生控件 function callNative() { window.webkit.messageHandlers.nativeCall.postMessage("显示控件"); } ``` 通过这种方式,你可以根据JavaScript传递的信息动态地在HTML页面上添加或改变原生...
这个源码示例展示了如何在WebView中调用H5页面,并利用Android原生的摄像头功能来扫描二维码,实现二维码识别。下面我们将详细探讨这个过程中涉及的关键知识点。 1. **WebView组件**:WebView是Android SDK提供的一...
以上就是利用WebView调用H5页面完成摄像头扫描二维码的基本流程。这个功能使得开发者能够轻松地在Android应用中实现二维码扫描,而无需依赖第三方库或者原生开发。同时,由于H5页面的灵活性,更新和维护也变得更加...
本项目的核心是利用`ViewPager`实现图片轮播,并结合加载网络图片的技术以及点击图片后在`WebView`中展示详情。下面将详细解释这些关键知识点。 1. **ViewPager组件**: `ViewPager`是Android SDK中的一个强大控件...
这种通信通常通过WebView组件来实现,WebView是Android系统提供的一种可以加载和显示网页的控件。 **一、Android原生调用HTML** 1. **WebView的使用**: 首先,在Android布局文件中添加一个WebView组件,并在...
在Android开发中,WebView是一个非常重要的组件,它允许我们在原生的应用程序中嵌入网页内容,使得用户可以在不离开应用的情况下浏览网页。本篇将详细讲解WebView的使用、功能及常见配置。 首先,WebView的基本使用...
综上所述,"android webview控件案例"涵盖了WebView的基本使用,包括加载网页、处理链接点击、显示进度条、设置缓存策略以及JavaScript与原生应用的交互。通过这个案例,开发者可以深入理解WebView的工作原理,并在...
总之,Android WebView控件为开发者提供了在原生应用中展示网页内容的强大能力。通过深入了解和熟练运用,我们可以创建出既具有原生应用体验,又能够利用网页丰富功能的应用程序。在实际开发中,应结合项目需求,...
本篇将详细介绍如何使用WebView控件以及实现Java代码与JavaScript的互相调用。 首先,我们需要在AndroidManifest.xml文件中为WebView应用网络权限: ```xml ``` 接着,在布局文件(如activity_main.xml)中添加...
WebView是Android和iOS等操作系统提供的一个原生控件,它能够加载和显示HTML、CSS和JavaScript等内容。当用户在WebView中浏览网页时,如果网页中包含二维码图片,我们可以通过监听用户的长按事件来触发二维码识别。 ...
在Android布局文件中,我们可以添加一个WebView控件,如下所示: ```xml <WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 然后,在...
在布局文件中,我们可以添加一个WebView控件,并设置其加载特定的URL: ```xml <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 然后在...
)`或`webView(_:decidePolicyFor:)`代理方法中,检测到URL变化后,读取这个全局变量,然后使用iOS原生的`UIImage`类加载图片,并弹出一个`UIImageView`或使用`UIActionSheet`、`UIAlertController`等控件展示图片。...
还可以根据需求调整其他WebSettings,如启用缩放(setBuiltInZoomControls()),隐藏原生的缩放控件(setDisplayZoomControls(false)),启用加载图片(setLoadsImagesAutomatically(true))等。 8. **权限管理** ...
WebView是Android SDK中的一个控件,它允许应用程序加载并展示HTML、CSS和JavaScript内容。通过使用WebView,开发者可以在不离开应用程序的情况下提供丰富的网络体验。 2. **jsp页面**: JSP(JavaServer Pages)...
在Android开发中,Webview控件是一个非常重要的组件,它允许开发者在应用程序中嵌入网页内容,从而实现Web与原生应用的结合,这就是我们常说的WebAPP。本项目是基于Android Studio的一个示例,展示了如何利用Webview...
在本文中,我们将深入探讨如何在WebView中处理用户长按图片并实现保存图片的功能。 首先,我们需要理解WebView的基本用法。WebView是Android SDK提供的一种用于加载和显示网页的视图控件。我们可以使用`WebView....
在布局文件(如activity_main.xml)中,添加WebView控件: ```xml <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. **WebView的...
总结,Android中的JS与原生调用主要依赖`WebView`组件,通过JavaScript Interface、WebChromeClient、evaluateJavascript等方法实现交互。在实际开发中,我们需要权衡性能、安全性和功能需求,选择合适的方式来实现...