前面兩篇文章，主要實現了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 實現我們的點選圖片的事件。