有没有办法在android上有一个webview，我可以在页面加载之前注入css？

Posted 2023-05-07

【中文标题】有没有办法在android上有一个webview，我可以在页面加载之前注入css？

【英文标题】：Is there a way to have an webview on android where I can inject css before the page is loading?

【发布时间】：2021-08-17 14:41:32

【问题描述】：

我需要有一个 webview，在网页加载之前将 CSS 注入网页，以便将注入的 css 应用于加载页面本身。在 ios 网页视图上，这是一个原生功能，但据我所知，在 android 原生网页视图中没有这样的功能。

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

有没有提供这种功能的替代 webview？

【参考方案1】：

您可以在 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/

【讨论】：

但是 onPageFinished get 只在页面加载时触发，对吧？所以用户看到了实际的网页，然后我的 css 被应用了。例如。如果我在我的 css 中隐藏一个元素，它会被加载然后消失。或者，如果我更改文本颜色，则会显示旧颜色然后覆盖。我正在寻找的是在此之前应用 css，以便用户直接看到 css 更改。

那么您可以使用自定义 AlertBox 而不是 CSS...您可以为您的警报框获取许多时尚的模板，或者您也可以在您的项目中使用 CSS，但只需将“CSS 转换为 SVG”，然后用它作为装载的东西。参考 - css-tricks.com/using-svg

非常感谢您的回答！我只知道警报框作为用户对话框，所以很遗憾我还不明白如何使用它来解决我的问题。我想要例如在 webview 中调用“google.com”并将背景更改为红色，这样用户就永远不会看到原始的白色背景，即使在加载过程中也是如此。我将如何使用 AlertBox 来做到这一点？

很抱歉再次询问，但我真的被困在这一点上，并不真正了解如何使用 AlertBox 实现我的目标。你能再给我一些提示吗？

【参考方案2】：

您可以在 public void onLoadResource(WebView view, String url) 方法中添加您的 CSS 代码，然后它将在页面加载完成之前应用。 它将帮助您防止用户在应用您的 CSS 之前看到实际的网页。

以下是完整代码

    webView.setWebViewClient(new MyWebViewClient());
    String url = getString(R.string.blogURL);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadUrl(url);

WebViewClient类代码

private class MyWebViewClient extends WebViewClient 
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) 
        view.loadUrl(url);
        return true;
    

    @Override
    public void onPageFinished(WebView view, String url) 

         //if in the website used any javascript to interact with CSS then also add in this method, otherwise remove it from this method.
        view.loadUrl("javascript:(function()  " +
                "var h1 = document.getElementById('et_mobile_nav_menu').style.visibility='hidden'; " +
                ")()");
    

    @Override
    public void onLoadResource(WebView view, String url) 
        super.onLoadResource(view, url);

        view.loadUrl("javascript:(function()  " +
                "var h1 = document.getElementById('et_mobile_nav_menu').style.visibility='hidden'; " +
                ")()");
    

    @Override
    public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) 

        Toast.makeText(BlogActivity.this, "Something is wrong while loading blog. Please try again", Toast.LENGTH_SHORT).show();
    

希望对某人有所帮助