点击页面中的图片JS交互

有时候,有这样的需求,当我点击网页中的图片时,跳转到新的activity的,查看大图。并能给图片进行放大和缩小这样的功能。

实现这样的功能涉及两个技能要点:

点击网页中的图片时,跳转到新的activity:

js与android相互调用来实现

java调用js:给网页中每个图片添加点击事件

js调用java:点击网页中图片,调用android中方法,打开activity。

查看大图:

可以使用开源框架photoView来实现

photoView:

它是开源的框架,该控件对图片显示进行扩展,能够很方便的实现缩放的效果。

实现步骤

第一步网页加载完成手动给图片添加点击事件

由于网页本身并没有对图片设置点击事件,因此,这里我们要动态给每个img标签添加点击事件

//初始化

WebViewwebView.setWebViewClient(newWebViewClient(){//页面加载完成

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);//给网页里面的img标签去添加点击事件addPictureClick();

}

});

给每个img标签添加点击事件

Android 调用js代码,给每个img标签添加点击事件

private void addPictureClick() {//android调用js代码

webView.loadUrl("javascript:(function(){"+"var objs = document.getElementsByTagName(\"img\"); "+"for(var i=0;i+"{"+"    objs[i].onclick=function()  "+"   "+" {  "+"        window.imagelistner.openImage(this.src);  "+"    }  "+"}"+"})()");

}

第二步js调用android本地方法,打开新的Activity查看大图

当点击图片时,调用android本地方法,打开新的activity

//传递对象给webview 

webView.addJavascriptInterface(newJsCallJava({

@JavascriptInterface

@Override

public voidopenImage(String src) {

Intentintent=newIntent(getApplicationContext(),ShowActivity.class);

intent.putExtra("url",src);startActivity(intent);

}

},"imagelistner");

//创建接口对象

public interface JsCallJava{

public voidopenImage(String src);

}

第三步:查看大图实现

初始化ShowActivity的布局文件

布局结构实现:

xml version="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><uk.co.senab.photoview.PhotoViewandroid:id="@+id/photoView"android:layout_width="match_parent"android:layout_height="match_parent"/>LinearLayout>

注意:布局中加载图片的控件是photoView,该控件对图片显示进行扩展

能够很方便的实现缩放的效果。

要使用该控件,需要在moudle中添加相关依赖:phoneView.jar的依赖

ShowActivity的实现

public class   ShowActivity  extends   Activity {

@BindView(R.id.photoView

PhotoViewphotoView;

@Override

protected void onCreate(BundlesavedInstanceState){

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_show);

ButterKnife.bind(this);

String url = getIntent().getStringExtra("url");

Picasso.with(this).load(url).into(photoView);

}

}

你可能感兴趣的:(点击页面中的图片JS交互)