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

前面两篇文章，主要实现了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，使用腾讯X5内核、并加入广告拦截。