如何在 webView 中向网站添加 CSS（填充）答案

【问题标题】：How to add CSS (padding) to website in a webView如何在 webView 中向网站添加 CSS（填充）
【发布时间】：2019-02-25 15:18:26
【问题描述】：

我一直想知道如何设置 padding-bottom（自定义 CSS）以使用 RemoteConfig 中的网页（有一个 URL）。我无权访问网页，因此无法直接在源文件中对其进行编辑。

这是我的代码：

public class PlayoffsFragment extends BaseFragment {
    private WebView webView;

    public static PlayoffsFragment newInstance(Bundle args) {
        PlayoffsFragment fragment = new PlayoffsFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater,@Nullable ViewGroup container,@Nullable Bundle savedInstanceState) {
        rootView =  inflater.inflate(R.layout.fragment_playoffs, container, false);
    setActionBar();
    setViews();
    setViewContents();
        return rootView; 
    }

    @Override
    public void onPrepareOptionsMenu(Menu menu) {
        super.onPrepareOptionsMenu(menu);
        hideCalendarMenuItem(); 
    }

    @Override
    protected void setActionBar() {
        showActionBar();
        setContentMarginOff();
        changeToolbarBackground(R.color.transparent);
        changeToolbarIconsColor(ContextCompat.getColor(getContext(), R.color.white)); }


    @Override
    protected void setViews() {
        webView = rootView.findViewById(R.id.webview);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.getSettings().setDomStorageEnabled(true);
        webView.getSettings().setDatabaseEnabled(true);
        webView.getSettings().setMinimumFontSize(1);
        webView.getSettings().setMinimumLogicalFontSize(1);
    }

    @Override
    protected void setViewContents() {
        webView.loadUrl(BuildConfig.WEB_URL);
    }

}

【问题讨论】：

也许您可以使用 http 请求检索网页源代码，然后将其和您的自定义 css 解析为 webview。
@AhmadBudairi 好吧，我会试试的。感谢您的建议

标签： java android css android-webview

【解决方案1】：

好吧，我设法做到了。对于任何想做类似事情的人，这里是我更新的代码：

@Override
protected void setViews() {
    webView.setWebViewClient(new WebViewClient());
    webView.setWebChromeClient(new WebChromeClient());
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setDomStorageEnabled(true);
    webView.getSettings().setDatabaseEnabled(true);
    webView.getSettings().setMinimumFontSize(1);
    webView.getSettings().setMinimumLogicalFontSize(1);
    webView.setWebViewClient(new WebViewClient(){

        public void onPageFinished(WebView view, String url){
            injectCSS();
            super.onPageFinished(view, url);
        }
    });
}

@Override
protected void setViewContents() {
    webView.loadUrl(url);
    }

private void injectCSS() {
    try {
        InputStream inputStream = getContext().getAssets().open("styles.css");
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();
        String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
        webView.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
}

我在 Assets 文件夹中创建了 styles.css。

【讨论】：