Android中WebView加载Html中的图片添加点击事件

最新推荐文章于 2023-12-18 15:40:07 发布

SoulOfAndroid

最新推荐文章于 2023-12-18 15:40:07 发布

阅读量6.1k

点赞数

分类专栏： android 文章标签： webview android html

本文链接：https://blog.csdn.net/SoulOfAndroid/article/details/41483121

版权

android 专栏收录该内容

117 篇文章 0 订阅

订阅专栏

基本的思路：

（1）WebView来加载HTML。

（2）向HTML中注入JavaScript，利用JavaScript来调用Android中的方法（执行一些跳转的操作等等）。

首先你必须有一个HTML或者是一个地址，或者是存到本地的一个文件。我这里使用的是存到本地的HTML文件。

index.html。内容是：

<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body>标题<img src='http://uploadservice.zujuan.com/Upload/2014-11/12/b74bc316-03e0-4727-9824-d189f1690783/paper.files/image005.png' style='vertical-align:middle;' /></body><ml>

他的位置如下：

下面是布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <WebView
        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.main;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

import com.example.day_2014_11_25_htmlimgclick.R;

public class MainActivity extends Activity {

	private WebView mWebView;

	@SuppressLint("SetJavaScriptEnabled")
	@Override
	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() {

			@Override
			public void onPageFinished(WebView view, String url) {

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

			@Override
			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"/>

就是如此的简单。

SoulOfAndroid

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Android中WebView加载Html中的图片添加点击事件

基本的思路：（1）WebView来加载HTML。（2）向HTML中注入JavaScript，利用JavaScript来调用Android中的方法（执行一些跳转的操作等等）。首先你必须有一个HTML或者是一个地址，或者是存到本地的一个文件。在这里我使用的存到本地的文件：index.html。他的位置如下：
复制链接

扫一扫