>  기사  >  웹 프론트엔드  >  Android에서 WebView를 사용하여 웹사이트에 맞춤 CSS를 삽입하는 방법은 무엇입니까?

Android에서 WebView를 사용하여 웹사이트에 맞춤 CSS를 삽입하는 방법은 무엇입니까?

DDD
DDD원래의
2024-10-28 09:41:02639검색

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

Android에서 WebView를 사용하여 웹사이트에 CSS 삽입

Android 프로그래밍에서 애플리케이션 내 웹페이지 표시는 WebView를 사용하여 수행됩니다. 그러나 개발자가 사용자 정의 CSS를 삽입하여 표시된 페이지의 모양을 수정해야 하는 상황이 있을 수 있습니다.

이 문제를 해결하기 위해 WebView를 사용하여 CSS를 웹페이지에 직접 삽입할 수는 없습니다. 해결 방법으로 JavaScript를 사용하여 페이지의 DOM(문서 개체 모델)을 조작할 수 있습니다.

MainActivity.java 파일에 대해 다음과 같이 수정된 코드를 고려하세요.

public class MainActivity extends ActionBarActivity {

  WebView webView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    webView = new WebView(this);
    setContentView(webView);

    // 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);
        }
    });

    // Load a webpage
    webView.loadUrl("https://www.google.com");
}

// 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();
    }
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();
    if (id == R.id.action_settings) {
        return true;
    }
    return super.onOptionsItemSelected(item);
  }
}

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

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