Android中WebView加载Html中的图片添加点击事件
Android中WebView加载Html中的图片添加点击事件
& & 基本的思路：
（1）WebView来加载HTML。
（2）向HTML中注入JavaScript，利用JavaScript来调用Android中的方法（执行一些跳转的操作等等）。
&首先你必须有一个HTML或者是一个地址，或者是存到本地的一个文件。我这里使用的是存到本地的HTML文件。
index.html。内容是：
&html&&head& &meta http-equiv=&Content-Type& content=&text/ charset=utf-8&&&/head&&body&标题&img src='/Upload//b74bc316-03e0--d189f1690783/paper.files/image005.png' style='vertical-align:' /&&/body&&ml&
他的位置如下：
下面是布局的代码：
&?xml version=&1.0& encoding=&utf-8&?&
&LinearLayout xmlns:android=&/apk/res/android&
android:layout_width=&match_parent&
android:layout_height=&match_parent&
android:orientation=&vertical& &
android:id=&@+id/web_view&
android:layout_width=&match_parent&
android:layout_height=&match_parent&
android:layout_gravity=&center&
&/LinearLayout&
接下来是MainActivity.java:
package com.panpass.
import android.annotation.SuppressL
import android.app.A
import android.os.B
import android.webkit.WebChromeC
import android.webkit.WebS
import android.webkit.WebV
import android.webkit.WebViewC
import android.widget.T
import com.example.day__htmlimgclick.R;
public class MainActivity extends Activity {
private WebView mWebV
@SuppressLint(&SetJavaScriptEnabled&)
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
mWebView = (WebView) findViewById(R.id.web_view);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setBuiltInZoomControls(false);
mWebView.getSettings().setPluginsEnabled(true);
mWebView.getSettings().setPluginState(WebSettings.PluginState.ON);
// 特别要注意这行代码,意思是在js中条用android中的第一个参数的实际名字。这里第一个参数是this。
//也就是本类的实例。imgelistener是本类的实例在js中的名字。
// 也就是说你要在js中调用MainActivity这个类中的方法的话就必须给MainActivity这个类在js中的名字，
//这样你才能在js中调用android中的类中的方法。
mWebView.addJavascriptInterface(this, &imagelistner&);
mWebView.loadUrl(&file:///android_asset/index.html&);
mWebView.setWebViewClient(new WebViewClient() {
public void onPageFinished(WebView view, String url) {
mWebView.loadUrl(&javascript:(function(){&
+ &var objs = document.getElementsByTagName(\&img\&); &
+ &for(var i=0;i&objs.i++)
objs[i].onclick=function()
window.imagelistner.openImage(this.src);
& + &}& + &})()&);
public boolean shouldOverrideUrlLoading(WebView view, String url) {
return super.shouldOverrideUrlLoading(view, url);
// 下面的@SuppressLint(&JavascriptInterface&)最好加上。防止在某些版本中js和java的交互不支持。
@SuppressLint(&JavascriptInterface&)
public void openImage(String img) {
Toast.makeText(this, img, Toast.LENGTH_SHORT).show();
OK最后是权限：
& &&uses-permission android:name=&android.permission.INTERNET&/&
就是如此的简单。
我的热门文章
即使是一小步也想与你分享HTML5：百度地图手机端单触点单击和长按事件，解决部分手机
HTML5：百度地图手机端单触点单击和长按事件，解决部分手机
HTML5：百度地图手机端单触点单击和长按事件，解决部分手机，有需要的朋友可以参考下。下面是JS文件[javascript]view plaincopy/***AuthorYX**对百度地图的事件扩展，目前扩展了fastclick和longclick,*解决某些设备click不执行的问题*解决长按事件在拖动、多触点依然执行的bug*v1.0.0*/(function(){BMap.Map.prototype.on=function(evt,fn,data,option){if(!evt||!fn)var$this=varevtList=["longtouch","onetouch"];if(inArray(evt,evtList)){MesureEvents[evt]($this,evt,fn,data,option);$this.getContainer().querySelector("div.BMap_mask").addEventListener(evt,fn);}else{$this.addEventListener(evt,fn);}};varcenterAndZoom=BMap.Map.prototype.centerAndZBMap.Map.prototype.centerAndZoom=function(){var$this=centerAndZoom.apply(this,arguments);if(!$this.hasRegistMyTouch){$this.on("onetouch",function(e){//console.log(e);varevent=document.createEvent("MouseEvent");event.initEvent("fastclick",true,true);event.clientX=e.clientX;event.clientY=e.clientY;event.point=e.$this.dispatchEvent(event);varevent=document.createEvent("MouseEvent");event.initEvent("click",true,true);event.clientX=e.clientX;event.clientY=e.clientY;$this.dispatchEvent(event);});$this.on("longtouch",function(e){//console.log(e);varevent=document.createEvent("TouchEvent");event.initEvent("longclick",true,true);event.clientX=e.clientX;event.clientY=e.clientY;event.point=e.$this.dispatchEvent(event);});$this.hasRegistMyTouch=}}varMesureEvents={onetouch:function($this,evt,fn,data,option){vartime=vartouchLocation=varmaxTouchesCount=0;$this.addEventListener("touchstart",function(e){maxTouchesCount=Math.max(maxTouchesCount,e.touches.length);if(maxTouchesCount==1){vartouch=e.changedTouches[0];touchLocation={x:touch.clientX,y:touch.clientY};time=newDate().getTime();}});$this.addEventListener("touchmove",function(e){maxTouchesCount=Math.max(maxTouchesCount,e.touches.length);if(maxTouchesCount==1){vartouch=e.changedTouches[0];if(Math.abs(touchLocation.x-touch.clientX)&0&&Math.abs(touchLocation.y-touch.clientY)&0){//解决部分手机对touchmove过分“敏感”的问题ismoved=//console.log("touchmove---");}else{ismoved=}}});$this.addEventListener("touchend",function(e){vartouches=e.touches.if(touches==0){vartemp=maxTouchesCvartempM=ismoved=maxTouchesCount=0;if(temp==1&&!tempM/*&&/BMap_mask/.test(e.srcElement.className)*/&&newDate().getTime()-time&500){varevent=document.createEvent("Event");event.initEvent("onetouch",true,true);vartouch=e.changedTouches[0];event.clientX=touch.clientX;event.clientY=touch.clientY;event.point=calLngLat($this,event.clientX,event.clientY);varmask=$this.getContainer().querySelector("div.BMap_mask");mask.dispatchEvent(event,fn);}}});},longtouch:function($this,evt,fn,data,option){vartime=varmaxTouchesCount=0;vartouchLocation=$this.addEventListener("touchstart",function(e){maxTouchesCount=Math.max(maxTouchesCount,e.touches.length);if(maxTouchesCount==1){vartouch=e.changedTouches[0];//console.log("one:"+touch.clientX+","+touch.clientY);touchLocation={x:touch.clientX,y:touch.clientY};time=newDate().getTime();timeout=setTimeout(function(){clearTimeout(timeout);timeout=longtouch(e);},750);}});$this.addEventListener("touchmove",function(e){maxTouchesCount=Math.max(maxTouchesCount,e.touches.length);if(maxTouchesCount==1){vartouch=e.changedTouches[0];//console.log("move:"+touch.clientX+","+touch.clientY);if(Math.abs(touchLocation.x-touch.clientX)&=2&&Math.abs(touchLocation.y-touch.clientY)&2){//解决部分手机对touchmove过分“敏感”的问题ismoved=//console.log("touchmove---");if(timeout){clearTimeout(timeout);timeout=}}else{ismoved=}}else{if(timeout){clearTimeout(timeout);timeout=}}});functionlongtouch(e){vartemp=maxTouchesCvartempM=ismoved=maxTouchesCount=0;if(temp==1&&!tempM){varevent=document.createEvent("Event");event.initEvent("longtouch",true,true);vartouch=e.changedTouches[0];event.clientX=touch.clientX;event.clientY=touch.clientY;event.point=calLngLat($this,event.clientX,event.clientY);$this.getContainer().querySelector("div.BMap_mask").dispatchEvent(event);}}$this.addEventListener("touchend",function(e){vartouches=e.touches.if(touches==0){maxTouchesCount=0;ismoved=}if(newDate().getTime()-time&1000){if(timeout){clearTimeout(timeout);timeout=}}});}}functioncalLngLat($this,x,y){varcontainer=$this.getContainer();varrect=container.getBoundingClientRect();vary=y-rect.varx=x-rect.varbounds=$this.getBounds();varlefTop=newBMap.Point(bounds.getSouthWest().lng,bounds.getNorthEast().lat);varlefTopPix=$this.pointToPixel(lefTop);varpix=newBMap.Pixel(lefTopPix.x+x,lefTopPix.y+y);varpoint=$this.pixelToPoint(pix);}functioninArray(obj,array){for(xinarray){if(obj==array[x])}}})(BMap); 转载博客：http://blog.csdn.net/yyyuuueeee/article/details/
发表评论：
TA的最新馆藏查看: 1645|回复: 3
TextView.setText(Html.fromHtml()图片怎样响应点击事件?
签到天数: 100 天连续签到: 1 天[LV.6]常住居民II主题帖子e币
TextView.setText(Html.fromHtml(source, imageGetter,tagHandler)图片响应点击事件?
我想用点击图片后能用photoView打开,图片的点击事件怎样设置?
还有webView里面的图片又是怎样可以用上photoView打开?点击事件如何监听?
新手求教,尽量详细些
将在APKbus上回复你的，再次回复你。
一：android.text.Html.fromHtml(String source, ImageGetter imageGetter, TagHandler tagHandler)
Source：需处理的html文本
imageGetter：对图片处理（处理html中的图片标签）
tagHandler：对标签进行处理（相当于自定义的标签处理，在这里面可以处理自定义的标签）
所以你要实现图片点击，就在tagHandler中处理即可。实现TagHandler，在handleTag方法中有个Editable参数，对其setS ...
签到天数: 37 天连续签到: 1 天[LV.5]常住居民I主题帖子e币
将在APKbus上回复你的，再次回复你。
一：android.text.Html.fromHtml(String source, ImageGetter imageGetter, TagHandler tagHandler)
Source：需处理的html文本
imageGetter：对图片处理（处理html中的图片标签）
tagHandler：对标签进行处理（相当于自定义的标签处理，在这里面可以处理自定义的标签）
所以你要实现图片点击，就在tagHandler中处理即可。实现TagHandler，在handleTag方法中有个Editable参数，对其setSpan处理，即setSpan中第一个参数，定义一个类继承ClickableSpan处理点击事件，这个类作为这个参数，setSpan最后一个参数填Spanned.SPAN_EXCLUSIVE_EXCLUSIVE即可。
二：要实现webView里面的图片的点击。
1.通过js注入函数，处理点击。
2.图片添加连接, 然后在webViewClient中发现链接是图片，处理点击。
具体实现代码，网上找找，应该都有的。
签到天数: 54 天连续签到: 1 天[LV.5]常住居民I主题帖子e币
webview与js在android上交互，用js调起你自己写的方法然后预览图片就可以。
请问大神,那在textView里面用Html.fromHtml()显示图片,里面的图片有怎样可以点击调用?&
签到天数: 100 天连续签到: 1 天[LV.6]常住居民II主题帖子e币
webview与js在android上交互，用js调起你自己写的方法然后预览图片就可以。
请问大神,那在textView里面用Html.fromHtml()显示图片,里面的图片有怎样可以点击调用?
QQ已认证，此人靠谱
社区认证会员
社区认证会员
推荐阅读热门话题
61882418416379326279279260257251226218210206715
27&分钟前2&小时前2&小时前2&小时前3&小时前4&小时前5&小时前7&小时前10&小时前昨天&23:57昨天&23:24昨天&20:16前天&23:56前天&20:41前天&18:543&天前
Powered by