首页 > 解决方案 > 有没有办法在 android 上有一个 webview,我可以在页面加载之前注入 css?

问题描述

我需要有一个 webview,我在加载之前将 CSS 注入网页,以便将注入的 css 应用于加载页面本身。在 iOS webviews 上,这是一个原生特性,但据我所知,在 android 原生 webview 中没有这样的特性。

我尝试为此使用flutters inAppWebview,但根据他们在https://inappwebview.dev/docs/javascript/user-scripts/上的文档,由于同样的原因,他们无法提供该功能,因此无法保证行为.

是否有一些提供这种功能的替代网络视图?

标签: javascriptandroidcsswebview

解决方案


您可以在 Android 网络视图中使用自己的自定义 CSS 样式表修改或时尚网页。为此,我们只需要一个 CSS 文件和几行代码。

喜欢~

@Override 
   public void onPageFinished(String URL, WebView view) {
    super.onPageFinished(view, URL);

   // Inject CSS when page is done loading
      injectCSS();
     
   });

  // Load a web
    webl.loadUrl("https://www.example.com");
}



// Inject CSS method: read style.css from assets folder
// Append stylesheet to document head
    private void injectCSS() {
        try {
            InputStream inputStream = getAssets().open("black.css");
            byte[] buffer = new byte[inputStream.available()];
            inputStream.read(buffer);
            inputStream.close();
            String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
            webl.loadUrl("javascript:(function() {" +
                    "var parent = document.getElementsByTagName('head').item(0);" +
                    "var style = document.createElement('style');" +
                    "style.type = 'text/css';" +
                    // Tell the browser to BASE64-decode the string into your script !!!
                    "style.innerHTML = window.atob('" + encoded + "');" +
                    "parent.appendChild(style)" +
                    "})()");
        } catch (Exception e) {
            e.printStackTrace();
        };

希望它会有所帮助

参考 - https://www.programmersought.com/article/54381014286/


推荐阅读