Android의 WebView에 표시된 웹사이트에 사용자 정의 CSS를 삽입하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

Android의 WebView에 표시된 웹사이트에 사용자 정의 CSS를 삽입하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-10-28 20:17:02

원래의

820명이 탐색했습니다.

How to Inject Custom CSS into a Website Displayed in a WebView on Android?

Android에서 WebView를 사용하여 CSS를 웹사이트에 통합

웹뷰 내에 표시되는 웹사이트에 맞춤 CSS를 삽입하면 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 Android 기기의 웹뷰에 표시된 웹페이지에 CSS를 삽입하는 방법에 대해 설명합니다.

문제 설명

목표는 www의 배경색을 수정하는 것입니다. .google.com을 빨간색으로 변경합니다. 자산 폴더에 있는 style.css라는 파일에서 CSS를 삽입하려고 시도했지만 코드가 작동하지 않습니다.

잘못된 코드

잘못된 코드 제공됨:

String html = "<html><head><style> src: url('file:///android_asset/style.css')</style></head></html>";

webView.loadData(html, "text/html", "utf-8");
webView.loadUrl("https://www.google.com");

로그인 후 복사

올바른 솔루션

CSS는 웹페이지에 직접 삽입할 수 없습니다. 그러나 JavaScript를 사용하여 페이지의 DOM을 조작할 수 있습니다. 수정된 코드는 다음과 같습니다.

// MainActivity.java

...

// Enable Javascript
webView.getSettings().setJavaScriptEnabled(true);

// Add a WebViewClient
webView.setWebViewClient(new WebViewClient() {

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

        // Inject CSS when page is done loading
        injectCSS();
        super.onPageFinished(view, url);
    }
});

...

// Inject CSS method: read style.css from assets folder
// Append stylesheet to document head
private void injectCSS() {
    try {
        InputStream inputStream = getAssets().open("style.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';" +
                // Tell the browser to BASE64-decode the string into your script !!!
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");
    } catch (Exception e) {
        e.printStackTrace();
    }
}

로그인 후 복사

이 코드는 CSS를 웹페이지에 삽입하기 전에 페이지 로드가 완료될 때까지 기다리는 WebViewClient를 설정합니다. injectCSS() 메소드는 자산 폴더에서 CSS 파일을 읽고 Base64로 인코딩한 다음 JavaScript를 사용하여 웹페이지의 문서 헤드에 스타일시트를 추가합니다.

위 내용은 Android의 WebView에 표시된 웹사이트에 사용자 정의 CSS를 삽입하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!