Android如何在WebView中的外部HTML頁面加載自定義CSS

我想將我的自定義CSS應用於HTML頁面，我試過這種方式，但它不工作。Android如何在WebView中的外部HTML頁面加載自定義CSS

wv.loadUrl("<style>.featured {"+ 
     " background-image: -ms-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+ 
     " background-image: -moz-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+ 
     " background-image: -o-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+ 
     "background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F9F6F9), color-stop(1, #ECE4F4));"+ 
     " background-image: -webkit-linear-gradient(bottom, #F9F6F9 0%, #ECE4F4 100%);"+ 
     " background-image: linear-gradient(to top, #F9F6F9 0%, #ECE4F4 100%);"+ 
     "}");

請幫助我。

來源

2012-09-25 Nishit Patel

謝謝你的答案，但我有我的解決方案。

這是我的解決方案。

wv.loadUrl("javascript:(function() { " +       
    "var divs = document.getElementsByClassName('free');"+ 
    "for(var i=0; i<divs.length; i++)"+ 
    "{"+ 
     "divs[i].style.backgroundImage='-webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #EFD2E4))';"+ 
     "}"+ 
    "})()");

使用此功能，您可以將自定義CSS應用於Android中任何HTML或HTML元素。

來源

2012-09-25 06:20:18

將您的html和css文件放在Assets文件夾中。並使用下面的代碼。

Main.java

WebView webview = (WebView) findViewById(R.id.abtus_webView); 
webview.loadUrl("file:///android_asset/index.html");

，如果你想使用的圖像轉換成HTML網頁，然後添加以下代碼到HTML頁面。

htmltest.html

<img src="file:///android_asset/images/abc.png">

我已經把圖像轉換成在資產folder.This的圖像文件夾爲我工作是正確的，我希望它可以幫助你。

來源

2012-09-25 05:12:42

謝謝你的回答拉胡爾，但我解決我的問題。 –

您可以使用javascript: URL功能注入自定義JS。

這裏是你如何可以添加使用這種從Java的CSS規則：

/** 
* Creates a CSS element in the <head> section of the Web page and assigns it 
* to a `customSheet` JS variable 
*/ 
private final static String CREATE_CUSTOM_SHEET = 
    "if (typeof(document.head) != 'undefined' && typeof(customSheet) == 'undefined') {" 
     + "var customSheet = (function() {" 
      + "var style = document.createElement(\"style\");" 
      + "style.appendChild(document.createTextNode(\"\"));" 
      + "document.head.appendChild(style);" 
      + "return style.sheet;" 
     + "})();" 
    + "}"; 

/** 
* Adds CSS properties to the loaded Web page. A <head> section should exist when this method is called. 
* The Web view should be configured with `.getSettings().setJavaScriptEnabled(true);` 
* 
* @param webView Web view to inject into 
* @param cssRules CSS rules to inject 
*/ 
void injectCssIntoWebView(WebView webView, String... cssRules) { 
    StringBuilder jsUrl = new StringBuilder("javascript:"); 
    jsUrl 
     .append(CREATE_CUSTOM_SHEET) 
     .append("if (typeof(customSheet) != 'undefined') {"); 
    int cnt = 0; 
    for (String cssRule : cssRules) { 
     jsUrl 
      .append("customSheet.insertRule('") 
      .append(cssRule) 
      .append("', ") 
      .append(cnt++) 
      .append(");"); 
    } 
    jsUrl.append("}"); 

    webView.loadUrl(jsUrl.toString()); 
}

下面是上述方法的使用示例：

@Override 
public void onPageFinished(WebView webView, String url) { 
    // Several people probably worked hard on the design of this Web page, let's hope they won't see what's next 
    injectCssIntoWebView(
     webView, 
     "div { border: 4px solid yellow; }", 
     "p { border: 4px solid green; }", 
     "a { border: 4px solid black; }", 
     "img { border: 4px solid blue; }" 
    ); 
}

來源

2015-05-16 01:12:30

Android如何在WebView中的外部HTML頁面加載自定義CSS

回答

相關問題