您的位置：首页 > 移动开发 > Android开发

Android WebView与JS页面相互调用(二)

2017-05-15 16:25 239 查看

此篇讲解 Android webview 显示js页面

点击js页面中的图片获取图片的路径在另一个activity显示

即获取WebView加载页面所有的图片标签

1.显示webview的页面

package com.xiaoqiqiao.bridgebetweencollegesstudent.activity;

import java.util.ArrayList;

import android.annotation.SuppressLint;

import android.content.Context;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

import android.text.TextUtils;

import android.view.KeyEvent;

import android.view.View;

import android.view.View.OnClickListener;

import android.webkit.DownloadListener;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.webkit.WebViewClient;

import android.widget.ProgressBar;

import android.widget.RelativeLayout;

import android.widget.TextView;

import com.umeng.analytics.MobclickAgent;

import com.xiaoqiqiao.bridgebetweencollegesstudent.BaseActivity;

import com.xiaoqiqiao.bridgebetweencollegesstudent.R;

/**

* 显示h5页面

* */

public class WebViewActivity extends BaseActivity implements OnClickListener{

private RelativeLayout backlayout;
private RelativeLayout closelayout;
private TextView titletv;
private ProgressBar progressbar;
private TextView textview;
private WebView webview;
private String firsturl="";//第一次加载的url
private ArrayList<String> list;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_webview);
initView();
}

/**
* 初始化各种view
* */

@SuppressLint({ "SetJavaScriptEnabled", "NewApi" })
public void initView(){
//获取传递值
Intent intent=getIntent();
firsturl=intent.getStringExtra("url");
list=new ArrayList<String>();
backlayout=(RelativeLayout) findViewById(R.id.activity_webview_backlayout);
backlayout.setOnClickListener(this);
closelayout=(RelativeLayout) findViewById(R.id.activity_webview_closelayout);
closelayout.setOnClickListener(this);
titletv=(TextView) findViewById(R.id.activity_webview_titletv);
progressbar=(ProgressBar) findViewById(R.id.activity_webview_progressbar);
textview=(TextView) findViewById(R.id.activity_webview_textview);
webview=(WebView) findViewById(R.id.activity_webview_webview);
//获取WebSettings对象
WebSettings settings=webview.getSettings();
//设置setting属性
settings.setJavaScriptEnabled(true);//支持js
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);//设置缓存方式不使用缓存只从网络获取数据
settings.setDomStorageEnabled(true);//开启DOM storage API功能（HTML5 提供的一种标准的接口，主要将键值对存储在本地，在页面加载完毕后可以通过 JavaScript 来操作这些数据。）
settings.setDefaultTextEncodingName("utf-8");//设置默认编码
settings.setUseWideViewPort(false);//将图片调整到适合webview的大小
settings.setSupportZoom(true);//支持缩放
settings.setDisplayZoomControls(false);//设定缩放控件隐藏
settings.setAllowFileAccess(true);//设置可以访问文件
settings.setBuiltInZoomControls(true);//设置支持缩放
settings.setJavaScriptCanOpenWindowsAutomatically(true);//支持通过JS打开新窗口
settings.setLoadWithOverviewMode(true);//缩放至屏幕的大小
settings.setLoadsImagesAutomatically(true);//支持自动加载图片
//设置webview监听
webview.setWebViewClient(myWebViewClient);//WebViewClient监听
webview.setWebChromeClient(myWebChromeClient);//WebChromeClient 监听
webview.setDownloadListener(new MyDownloadListenter());//DownloadListener 监听
//webview加载网页
if(!TextUtils.isEmpty(firsturl)){
webview.loadUrl(firsturl);
}else{
textview.setVisibility(View.VISIBLE);//textview显示
progressbar.setVisibility(View.GONE);//progressbar隐藏
webview.setVisibility(View.GONE);//webview隐藏
textview.setText("链接为空加载失败！");
}
// 添加js交互接口类，并起别名 imagelistner
webview.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");
}

/**
* JavascriptInterface接口
* */

@SuppressLint("JavascriptInterface")
public class JavascriptInterface {

private Context context;
public JavascriptInterface(Context context) {
this.context=context;
}

@android.webkit.JavascriptInterface
public void openImage(String img) {
list.removeAll(list);
list.add(img);
Intent intent=new Intent();
intent.putStringArrayListExtra("list", list);
intent.putExtra("position", 0);
intent.setClass(context, ShowBigImageviewActivity.class);
context.startActivity(intent);

// Log.d("WebViewActivity", "img----:" +img);
}
}

/**
* 匹配h5 页面中的图片路径
* */

private void addImageClickListner() {
//这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，在还是执行的时候调用本地接口传递url过去
String method="javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].onclick=function() " + " { "
+ " window.imagelistner.openImage(this.src); "
+ " } " + "}" + "})()";
webview.loadUrl(method);
}

/**
* WebViewClient
* 说明:主要用来辅助WebView处理各种通知、请求等事件，通过setWebViewClient方法设置
*
* 方法1:shouldOverrideUrlLoading
* 说明:当点击页面中的链接后会在WebView加载URL前回调此方法一般点击一个链接此方法调用一次。
* 此方法返回值意义:return true:则在打开新的url时WebView就不会再加载这个url了所有处理都需要在WebView中操作包含加载。
* return false:则系统就认为上层没有做处理接下来还是会继续加载这个url的默认return false。
* 方法2:shouldInterceptRequest
* 说明:加载网页时替换某个资源比如在加载一个网页时需要加载一个logo图片而我们想要替换这个logo图片用我们assets目录下的一张图片替代
* 我们知道我们在加载一个网页的同时也会加载js,css,图片等资源所以会多次调用shouldInterceptRequest方法
* 我们可以在shouldInterceptRequest中进行图片替换。
* shouldInterceptRequest有两个重载：
* ①public WebResourceResponse shouldInterceptRequest (WebView view, String url) 【已过时】
* ②public WebResourceResponse shouldInterceptRequest (WebView view, WebResourceRequest request)
* 方法3:onPageStarted
* 说明:开始加载网页
* 方法4: onPageFinished
* 说明:网页加载完成
* 方法5:onReceivedError
* 说明:网页加载错误时处理
* 方法6:onReceivedSslError
* 说明:处理https请求，为WebView处理ssl证书设置WebView默认是不处理https请求的需要在WebViewClient子类中重写父类的
* */

WebViewClient myWebViewClient = new WebViewClient() {

public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return false;
};

public void onPageStarted(WebView view, String url, android.graphics.Bitmap favicon) {
super.onPageStarted(view, url, favicon);
//开始加载网页时处理如：显示"加载提示" 的加载对话框
};

public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
//网页加载完成时处理如：让加载对话框消失

if(!(firsturl.equals(url))){

closelayout.setVisibility(View.VISIBLE);
}

//html加载完成之后，添加监听图片的点击js函数
addImageClickListner();
};

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
//加载网页失败时处理如：提示失败，或显示新的界面
textview.setVisibility(View.VISIBLE);//textview显示
progressbar.setVisibility(View.GONE);//progressbar隐藏
webview.setVisibility(View.GONE);//webview隐藏
textview.setText(description);
};

public void onReceivedSslError(WebView view, android.webkit.SslErrorHandler handler, android.net.http.SslError error) {
handler.proceed();//接受信任所有网站的证书

// handler.cancel();//默认操作不处理

// handler.handleMessage(null);//可做其他处理
};
};

/**
* WebChromeClient
* 说明:主要用来辅助WebView处理Javascript的对话框、网站图标、网站标题以及网页加载进度等
*
* 方法1:onProgressChanged
* 说明:监听网页加载进度 progress表示当前页面加载的进度为1至100的整数
* 方法2:onReceivedTitle
* 说明:监听网页标题 : 比如百度页面的标题是百度一下，你就知道
* 方法3:onReceivedIcon
* 说明:监听网页图标
* */

WebChromeClient myWebChromeClient=new WebChromeClient(){

public void onProgressChanged(WebView view, int newProgress) {
if(newProgress==100){

progressbar.setVisibility(View.GONE);//加载完网页进度条消失

webview.setVisibility(View.VISIBLE);//webview显示

textview.setVisibility(View.GONE);//textview隐藏

}else{

progressbar.setVisibility(View.VISIBLE);//开始加载网页时显示进度条

progressbar.setProgress(newProgress);//设置进度值

webview.setVisibility(View.GONE);//webview隐藏

textview.setVisibility(View.GONE);//textview隐藏

}
};

public void onReceivedTitle(WebView view, String title) {
if("".equals(title)||"null".equals(title)||null==title){
titletv.setText("详情页");
}else{
titletv.setText(title);
}
};

public void onReceivedIcon(WebView view, android.graphics.Bitmap icon) {

};
};

/**
* DownloadListener
* 说明:通常webview渲染的界面中含有可以下载文件的链接点击该链接后应该开始执行下载的操作并保存文件到本地中。
*
* 方法1:onDownloadStart
* 说明:下载任务主要有两种方式 1:自定义下载任务 2:调用系统的download的模块
*
* */

class MyDownloadListenter implements DownloadListener{

@Override
public void onDownloadStart(String arg0, String arg1, String arg2,
String arg3, long arg4) {
Uri uri=Uri.parse(arg0);
Intent intent=new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
}

}

/**
* 各种点击事件的方法
* */

@Override
public void onClick(View arg0) {
switch(arg0.getId()){
case R.id.activity_webview_backlayout://返回操作逐层退出
if(webview.canGoBack()) {//当webview不是处于第一页面时返回上一个页面

webview.goBack();

}else{//当webview处于第一页面时,直接退出程序

finish();

overridePendingTransition(0,R.anim.activity_right_open);

}
break;
case R.id.activity_webview_closelayout://关闭如论如何都直接退出
if(webview.canGoBack()){
webview.goBack();//goBack()表示返回WebView的上一页面
}
finish();
overridePendingTransition(0,R.anim.activity_right_open);
break;
}
}

/**
* onResume方法
* */

@Override
protected void onResume() {
super.onResume();
MobclickAgent.onResume(this);
};

/**
* onPause方法
* */

@Override
protected void onPause() {
super.onPause();
MobclickAgent.onPause(this);
}

/**
* onKeyDown方法
* */

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode==KeyEvent.KEYCODE_BACK) {//逐层返回
if(webview.canGoBack()) {//当webview不是处于第一页面时返回上一个页面

webview.goBack();

}else{//当webview处于第一页面时,直接退出程序

finish();

overridePendingTransition(0,R.anim.activity_right_open);

}
return false;

}
return super.onKeyDown(keyCode, event);
}

}

主要代码

1.js代码过滤图片标示

private void addImageClickListner() {
//这段js函数的功能就是，遍历所有的img几点，并添加onclick函数，在还是执行的时候调用本地接口传递url过去
String method="javascript:(function(){"
+ "var objs = document.getElementsByTagName(\"img\"); "
+ "for(var i=0;i<objs.length;i++) " + "{"
+ " objs[i].onclick=function() " + " { "
+ " window.imagelistner.openImage(this.src); "
+ " } " + "}" + "})()";
webview.loadUrl(method);

}

2.android JavaScript接口

@SuppressLint("JavascriptInterface")
public class JavascriptInterface {

private Context context;
public JavascriptInterface(Context context) {
this.context=context;
}

@android.webkit.JavascriptInterface
public void openImage(String img) {
list.removeAll(list);
list.add(img);
Intent intent=new Intent();
intent.putStringArrayListExtra("list", list);
intent.putExtra("position", 0);
intent.setClass(context, ShowBigImageviewActivity.class);
context.startActivity(intent);
}

}

3.android JavaScript接口调用

webview.addJavascriptInterface(new JavascriptInterface(this), "imagelistner");

4.js代码过滤图片标示方法调用

WebViewClient myWebViewClient = new WebViewClient() {

public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return false;
};

public void onPageStarted(WebView view, String url, android.graphics.Bitmap favicon) {
super.onPageStarted(view, url, favicon);
};

public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);

addImageClickListner();

};

public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
super.onReceivedError(view, errorCode, description, failingUrl);
};

public void onReceivedSslError(WebView view, android.webkit.SslErrorHandler handler, android.net.http.SslError error) {

};
};

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： WebView与JS页面相互 webview 获取网页按钮点击事件 Android webview javascript

相关文章推荐

新的分享

章节导航