Android:我怎么知道CSS注入完成?

时间:2017-02-26 17:48:17

标签: java android html css

我只是在将CSS文件注入HTML后才尝试显示我的webview。 我试图将它放在onPageCommitVisible函数上,但它仅适用于上面的23 apis和。有人知道如何在CSS完成加载后才能显示webview?现在它“跳”并且在替换新的之前我看到原始CSS的第一秒。

@Override
        public void onPageFinished(WebView view, String url) {
            Utils.logDebug(this, "Page finished");
            if (android.os.Build.VERSION.SDK_INT < 23) {
                injectCSS(view);
            }
            super.onPageFinished(view, url);
            showWebView(true);
           onPageChange();
        }

这是我的InjestCSS功能:

private void injectCSS(WebView webView) {
            try {
                webView.loadUrl("javascript:(function() {" +
                        "var css = document.createElement(\"style\");\n" +
                        "css.type = \"text/css\";\n" +
                        "css.innerHTML = \"" + readFileAsString() + "\";\n" +
                        "document.body.appendChild(css);" +
                        "})()");
            } catch (Exception e) {
                e.printStackTrace();
            }
        }

此函数将CSS代码注入HTML,如您在函数中所见。

1 个答案:

答案 0 :(得分:2)

很少有地方可以处理这个问题。

  • 您可以使用evaluateJavaScript代替loadUrl(API级别19)并传递回调,您可以在其中设置webview可见。
  • 您可以使用addJavaScriptInterface注册自己的javascript界面​​,并在脚本末尾调用
  • 您可以设置WebChromeClient并覆盖onJsAlert,然后在您的脚本中使用特定消息提高警报。
  • 更新:此外,这可以通过截取“css”请求之一来实现,并附加所需内容的已加载文件。这将允许您在onPageFinished之前注入样式。检查此this主题。

我在以下示例中结合的所有方法:

    package com.j2ko.webviewapp;

    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.util.Base64;
    import android.util.Log;
    import android.view.View;
    import android.webkit.JavascriptInterface;
    import android.webkit.JsResult;
    import android.webkit.ValueCallback;
    import android.webkit.WebChromeClient;
    import android.webkit.WebView;
    import android.webkit.WebViewClient;

    import java.io.InputStream;
    import java.io.StringReader;
    import java.io.StringWriter;

    public class MainActivity extends AppCompatActivity {
        private static final String MAIN_FUNC_FMT = "(function() { %s })()";
        private static final String FUNC_BODY_FMT =
                "var parent = document.loadedgetElementsByTagName('head').item(0);" +
                        "var css = document.createElement('style');" +
                        "css.type = 'text/css';" +
                        "css.innerHTML = %s;" +
                        "parent.appendChild(css);";

        private static final String BASE64_DECODE_FMT = "window.atob('%s')";

        WebView mWebView;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            mWebView = (WebView) findViewById(R.id.webview);
            mWebView.getSettings().setJavaScriptEnabled(true);
            mWebView.setWebViewClient(new WebViewClient() {
                @Override
                public void onPageFinished(WebView view, String url) {
                    super.onPageFinished(view, url);
                    //Change it to whatever
                    injectWithEvaluateAndInterface(view);
                }

                @Override
                public void onLoadResource(WebView view, String url) {
                    super.onLoadResource(view, url);
                }
            });
            mWebView.setVisibility(View.INVISIBLE);
            mWebView.loadUrl("http://wiki.org");
        }


        private static class CSSInjectBuilder {
            private final String mOrigin;
            private String mAtEnd = null;
            private boolean mUseBase64 = false;

            public CSSInjectBuilder(String css) {
                mOrigin = css;
            }

            public CSSInjectBuilder withBase64() {
                mUseBase64 = true;
                return this;
            }

            public CSSInjectBuilder withExpressionAtEnd(String expression){
                mAtEnd = expression;
                return this;
            }

            String build() {
                String func_body = FUNC_BODY_FMT;

                if (mAtEnd != null) {
                    func_body += mAtEnd;
                }

                final String css;
                if (mUseBase64) {
                    byte[] buffer = mOrigin.getBytes();
                    css = String.format(BASE64_DECODE_FMT, Base64.encodeToString(buffer, Base64.NO_WRAP));
                } else {
                    css = "'" + mOrigin + "'";
                }

                func_body = String.format(func_body, css);

                return String.format(MAIN_FUNC_FMT, func_body);
            }
        }

        byte[] loadAsset() {
            try {
                InputStream inputStream = getAssets().open("style.css");
                byte[] buffer = new byte[inputStream.available()];
                inputStream.read(buffer);
                inputStream.close();
                return buffer;
            } catch (Exception e) {
            }

            return null;
        }

        String loadCSS() {
            return new String(loadAsset());
        }

        void injectWithEvaluate(final WebView view) {
            view.evaluateJavascript(new CSSInjectBuilder(loadCSS()).withBase64().build(), new ValueCallback<String>() {
                @Override
                public void onReceiveValue(String value) {
                    view.setVisibility(View.VISIBLE);
                }
            });
        }

        void injectWithEvaluateAndInterface(WebView view) {
            view.addJavascriptInterface(new WebViewInterface(), "WebViewBackEnd");
            final String injector = new CSSInjectBuilder(loadCSS())
                    .withBase64()
                    .withExpressionAtEnd("window.WebViewBackEnd.CSSInjectionComplete();")
                    .build();

            view.evaluateJavascript(injector, null);
        }

        void injectWithLoadUrlSimple(WebView view) {
            view.loadUrl("javascript:" + loadCSS());
            view.setVisibility(View.VISIBLE);
        }

        void injectWithLoadUrlAndCheckAlert(final WebView view) {
            view.setWebChromeClient(new WebChromeClient() {
                @Override
                public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
                    if (message.equals("CSSInjectionComplete")) {
                        view.setVisibility(View.VISIBLE);
                        return true;
                    }
                    return super.onJsAlert(view, url, message, result);
                }
            });

            //alert could hang aplying scripts so put it on timeout
            final String injector = new CSSInjectBuilder(loadCSS())
                    .withBase64()
                    .withExpressionAtEnd("setTimeout(function(){alert('CSSInjectionComplete');}, 1);")
                    .build();

            view.loadUrl("javascript:"  + injector);
        }

        private class WebViewInterface {

            @JavascriptInterface
            public void CSSInjectionComplete(){

                mWebView.post(new Runnable() {
                    @Override
                    public void run() {
                        mWebView.setVisibility(View.VISIBLE);
                    }
                });
            }
        }

    }