前面两篇文章,主要实现了X5内核的WebView 播放视频,这一篇主要是加载html 代码。
public class X5WebView extends WebView {
private OnTopicLoadCallback callback;//加载完成后,回调
TextView title;
private WebViewClient client = new WebViewClient() {
/**
* 防止加载网页时调起系统浏览器
*/
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
@Override
public void onPageFinished(WebView webView, String s) {
super.onPageFinished(webView, s);
//渲染完成后,添加js
addImageClickListener(webView);
if (!Util.isNull(callback)) {
callback.onContentLoadOK();
}
//获取加载进度
}
};
/**
* 给图片添加点击事件
*
* @param webView
*/
private void addImageClickListener(WebView webView) {
webView.loadUrl("javascript:(function(){" +
"var objs = document.getElementsByTagName(\"img\"); " +
"for(var i=0;i +
"{"
+ " objs[i].οnclick=function() " +
" { "
+ " window." + MJavascriptInterface.FUNCTIONNAME + ".openImage(this.src); " +//通过js代码找到标签为img的代码块,设置点击的监听方法与本地的openImage方法进行连接
" } " +
"}" +
"})()");
}
WebChromeClient webChromeClient =new WebChromeClient(){
@Override
public void onProgressChanged(WebView webView, int newProgress) {
super.onProgressChanged(webView, newProgress);
if (!Util.isNull(callback)) {
if (newProgress == 100) {
callback.onContentLoadOK();
} else if (newProgress > 0 || newProgress < 100) {
callback.onLoadingProgress(newProgress);
}
}
}
};
@SuppressLint("SetJavaScriptEnabled")
public X5WebView(Context arg0, AttributeSet arg1) {
super(arg0, arg1);
this.setWebViewClient(client);
// this.setWebChromeClient(webChromeClient);
// WebStorage webStorage = WebStorage.getInstance();
initWebViewSettings();
this.getView().setClickable(true);
}
private void initWebViewSettings() {
WebSettings webSetting = this.getSettings();
webSetting.setJavaScriptEnabled(true);
webSetting.setJavaScriptCanOpenWindowsAutomatically(true);
webSetting.setAllowFileAccess(true);
webSetting.setLayoutAlgorithm(LayoutAlgorithm.NARROW_COLUMNS);
webSetting.setSupportZoom(true);
webSetting.setBuiltInZoomControls(true);
webSetting.setUseWideViewPort(true);
webSetting.setSupportMultipleWindows(true);
// webSetting.setLoadWithOverviewMode(true);
webSetting.setAppCacheEnabled(true);
// webSetting.setDatabaseEnabled(true);
webSetting.setDomStorageEnabled(true);
webSetting.setGeolocationEnabled(true);
webSetting.setAppCacheMaxSize(Long.MAX_VALUE);
// webSetting.setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);
webSetting.setPluginState(WebSettings.PluginState.ON_DEMAND);
// webSetting.setRenderPriority(WebSettings.RenderPriority.HIGH);
webSetting.setCacheMode(WebSettings.LOAD_NO_CACHE);
// this.getSettingsExtension().setPageCacheCapacity(IX5WebSettings.DEFAULT_CACHE_CAPACITY);//extension
// settings 的设计
}
@Override
protected boolean drawChild(Canvas canvas, View child, long drawingTime) {
boolean ret = super.drawChild(canvas, child, drawingTime);
return ret;
}
public X5WebView(Context arg0) {
super(arg0);
setBackgroundColor(85621);
}
/**
* 加载视频url
* @param videoUrl
*/
public void loadVideoUrl(String videoUrl) {
if (videoUrl.contains("html?")&&videoUrl.contains("iqiyi")) {
String[] urls=videoUrl.split("html?");
// url= urls[0]+"autoPlay=true&vid="+urls[1];
videoUrl= urls[0]+"html?rel=0&autoplay=1&"+urls[1];
}
loadUrl(videoUrl);
}
public void setLoadWebViewCallback(OnTopicLoadCallback callback) {
this.callback = callback;
}
}
使用NewsContentWebView的loadRenderedContent(String data)
,data就是接口中返回的html 内容代码。
public class NewsContentWebView extends X5WebView {
private static final String HTML_0 = "" +
"\n" +
"\n" +
"\n" +
"\n" +
"\n";
private static final String LIGHT_THEME_CSS = "";
private static final String HTML_1 = "" +
"\n" +
"\n" +
"\n";
private static final String HTML_2 = "" +
"\n" +
"\n" +
"";
public NewsContentWebView(@NonNull Context context) {
super(context);
init(context);
}
public NewsContentWebView(@NonNull Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
@SuppressLint({"AddJavascriptInterface", "JavascriptInterface"})
private void init(@NonNull Context context) {
LogUtils.e("添加javaScript");
// addJavascriptInterface(ImageJavascriptInterface.with(context), ImageJavascriptInterface.NAME);
}
@NonNull
protected String getThemeCssHtmlSlice() {
return LIGHT_THEME_CSS;
}
public void loadRenderedContent(String data) {
data = HTML_0 + getThemeCssHtmlSlice() + HTML_1 + data + "\n" + HTML_2;
loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
//设置点击图片进入查看图片的界面
String[] imageUrls = StringUtils.returnImageUrlsFromHtml(data);
/**
* 添加javascriptInterface
* 第一个参数:这里需要一个与js映射的java对象
* 第二个参数:该java对象被映射为js对象后在js里面的对象名,在js中要调用该对象的方法就是通过这个来调用
*/
addJavascriptInterface(new MJavascriptInterface(getContext(), imageUrls), MJavascriptInterface.FUNCTIONNAME);
}
}
这就是我们加入的js
public class MJavascriptInterface {
private Context context;
private String[] imageUrls;
public static final String FUNCTIONNAME = "imagelistener";
public MJavascriptInterface(Context context, String[] imageUrls) {
this.context = context;
this.imageUrls = imageUrls;
}
@SuppressLint("JavascriptInterface")
@JavascriptInterface
public void openImage(String img) {
Intent intent = new Intent();
intent.putExtra("imageUrls", imageUrls);
intent.putExtra("curImageUrl", img);
intent.setClass(context, PhotoBrowserActivity.class);
context.startActivity(intent);
for (int i = 0; i < imageUrls.length; i++) {
Log.e("图片地址" + i, imageUrls[i].toString());
}
}
}
通过这样的方法,就给WebView中注入了JS 实现我们的点击图片的事件。
参考文章
Android 实现WebView点击图片查看大图列表及图片保存功能
Android 抛弃原生WebView,使用腾讯X5内核、并加入广告拦截。