Android 使用WebView 加载新闻详情，添加点击图片的js(使用的腾讯的X5内核) (三)

缺乏、安全感 2022-05-21 04:34 121阅读 0赞

前面两篇文章，主要实现了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.length;i++) " +
                    "{"
                    + " objs[i].onclick=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 = "" +
                "<!DOCTYPE html>\n" +
                "<html>\n" +
                "<head>\n" +
                "<meta charset=\"UTF-8\">\n" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n";
    
        private static final String LIGHT_THEME_CSS = "<style type=\"text/css\">.reply img{\n" +
                " display: inline-block;\n" +
                " vertical-align: middle;\n" +
                " }"
                +
                " img {\n" +
    // " margin: 10px 0;\n" +
                "width:100%;" +
                "height:auto;" +
                " }" +
                "</style>";
        private static final String HTML_1 = "" +
                "</head>\n" +
                "<body>\n" +
                "<div class=\"reply\" id=\"markdown-container\">\n";
    
        private static final String HTML_2 = "" +
                "</div>\n" +
    
                "</body>\n" +
                "</html>";
    
        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]

[Android 抛弃原生WebView，使用腾讯X5内核、并加入广告拦截。][Android _WebView_X5]

[Android _WebView]: https://www.jb51.net/article/106272.htm
[Android _WebView_X5]: https://blog.csdn.net/qq_35070105/article/details/80047595