Android(安卓)使用WebView 加载新闻详情，添加点击图片的js(使用的腾讯的X5内核) (三)
16lz
2021-01-25
前面两篇文章，主要实现了X5内核的WebView 播放视频，这一篇主要是加载html 代码。
X5WebView
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，继承自前面的X5WebView
使用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); }}MJavascriptInterface
这就是我们加入的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内核、并加入广告拦截。
更多相关文章
- Android(安卓)LiveData 使用
- Android中的Parcelable序列化对象
- android 开发 View _1_ View的子类们 和 视图坐标系图
- android 左右滑动+索引图标实现方法与代码
- Android中picasso图片缓存
- ListView一些相关知识
- 编写android加载图片的程序时，遇到了内存泄露问题！
- Android(安卓)service启动流程分析.
- 【android中级】之android 背景圆角和图片圆角