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

집

웹 프론트엔드

CSS 튜토리얼

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

Mary-Kate Olsen

Oct 28, 2024 pm 08:17 PM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.