WebView与Javascript的交互
前言
在android开发中,经常遇到这样的需求:
- 点击WebView中的一张图片跳转到另外一个Activity页面展示图片
- 图片可左右滑,浏览该网页页面的其他的图片
以开发者的眼光看待这个问题,从现象分析需要传递的数据。
首先,左右滑动的页面可以用ViewPager来实现,只要传入一个url列表;其次,你需要定位到当前点中的图片的位置,所以还需要传递当前点击图片的位置,或者当前图片的url。
那么,怎么实现点击WebView的时候,从网页中取出这些数据呢?
WebView与Js的交互
package com.noonecode.jswebviewdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import java.util.Arrays;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity {
//测试的带许多图片的url
public static final String mUrl = "http://sports.gmw.cn/2016-11/04/content_22814737.htm";
//ButterKnife注解代替手动书写findViewById
@BindView(R.id.wv)
WebView mWv;
@BindView(R.id.pb)
ProgressBar mPb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initViews();
}
private void initViews() {
mWv.getSettings().setJavaScriptEnabled(true);
mWv.loadUrl(mUrl);//带图片网址
mWv.addJavascriptInterface(new MyJavascriptInterface(), "local_fun");//这里设置了Js的回调接口,注意
mWv.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;//url在WebView中打开
}
@Override
public void onPageFinished(WebView view, String url) {
mPb.setVisibility(View.GONE);
addImgListener();//设置监听
}
});
}
/**
* 返回单张图片url的点击监听
*/
private void addImgListener() {
mWv.loadUrl("javascript:(function(){" +
"var obj_imgs = document.getElementsByTagName(\"img\"); " +
"for(var i=0; i<obj_imgs.length; i++){" +
" obj_imgs[i].onclick=function(){" +
" window.local_fun.recImg(this.src);" +
" }" +
"}" +
"})()");
}
public class MyJavascriptInterface {
/**
* 一张图片的回调
*/
@JavascriptInterface
public void recImg(String url) {
Log.e("recImg", url);
}
}
}
网页完全加载完成后点击的效果:
这里,就已经完成点击一个WebView的图片,js会回调给java的回调函数中(这里简单的打印出来,读者拿到这个url,可以自行完成自己的逻辑)。
如果你还有或者整个列表的功能,请继续往下看~~~
WebView与Js的交互2
package com.noonecode.jswebviewdemo;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.ProgressBar;
import java.util.Arrays;
import butterknife.BindView;
import butterknife.ButterKnife;
public class MainActivity extends AppCompatActivity {
public static final String mUrl = "http://sports.gmw.cn/2016-11/04/content_22814737.htm";
@BindView(R.id.wv)
WebView mWv;
@BindView(R.id.pb)
ProgressBar mPb;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
initViews();
}
private void initViews() {
mWv.getSettings().setJavaScriptEnabled(true);
mWv.loadUrl(mUrl);
mWv.addJavascriptInterface(new MyJavascriptInterface(), "local_fun");
mWv.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView view, String url) {
mPb.setVisibility(View.GONE);
addImgsListener();
}
});
}
/**
* 返回所有图片url的点击监听
*/
private void addImgsListener() {
mWv.loadUrl("javascript:(function(){" +
"var obj_imgs = document.getElementsByTagName(\"img\"); " +
"var arr_urls = [];" +
"for(var i=0; i<obj_imgs.length; i++){ " +
" arr_urls[i] = obj_imgs[i].src; " +
" obj_imgs[i].onclick=function(){ " +
" window.local_fun.recImgs(arr_urls, this.src);" +
" }" +
"}" +
"})()");
}
public class MyJavascriptInterface {
/**
* 一堆图片的回调,带所有的url,和当前的url
*/
@JavascriptInterface
public void recImgs(String[] list, String url) {
Log.e("recImgs", Arrays.toString(list));
Log.e("recImgs", "current---->" + url);
}
}
}
通过对比,大家可以发现,只是多了在js中获取所有的img标签的src属性的逻辑,改一下回调的参数就可把网页中的所有url和当前url回调出来~~
这里主讲WebView和Js的交互,没有继续写具体拿到数据放到ViewPager展示的效果,大家可根据需求,继续引申~~
注意
这里的逻辑是在java代码中书写js回调,点击获得所有的img标签的src属性。具体不同的网页,不同的需求,可能需要书写不同的js代码。不可硬套。
(完毕)