大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

Android WebView 动态注入 CSS 和 JavaScript

如何在 Android WebView 重动态加载页面和注入 CSS 和 JavaScript ?

我们在开发过程中可能有这样的需求, 用一个 WebView 去加载网页的时候, 里面的样式在安卓上可能需要另外的一种样式, 这时候就可以采用这样的方法:

主要使用了 Android WebView 这个函数:

loadDataWithBaseURL(url, page, null, mDefaultEncoding, null);

下面是完整的 CSS注入 代码:

public class StyledWebView extends WebView {

    private static final String TAG              = "AsSamsung";
    public static String mDefaultEncoding = "UTF-8";
    private Context             mContext;
    private String mCss, mUrl;

    public StyledWebView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mContext = context;
        this.setHorizontalScrollBarEnabled(true);
        this.getSettings().setJavaScriptEnabled(true);
        this.getSettings().setBuiltInZoomControls(true);

        // Read custom attributes
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.StyledWebView);

        mCss = a.getString(R.styleable.StyledWebView_css);
        mUrl = a.getString(R.styleable.StyledWebView_url);

        a.recycle();
        
        loadUrl(mUrl);
    }
    

    /**
     * Complete delete everything in the webview.
     * Is needed to repaint 
     */
    public void clean() {
        super.loadUrl("javascript:document.getElementsByTagName('body')[0].innerHTML='';");

    }

    /**
     * Download url content, store it as a file and concat styles
     */
    @Override
    public void loadUrl(String url) {
        String page = WGet(url);
        String css = buildCss();
        page = injectCss(page, css);
        super.loadDataWithBaseURL(url, page, null, mDefaultEncoding, null);
    }

    /**
     * Concatenates CSS rules to given page content
     * @return Concatenation result
     */
    private String injectCss(String page, String css) {
        int headEnd = page.indexOf("</head>");
        String res = "";
        if (headEnd > 0) {
            res = page.substring(0, headEnd) + css + page.substring(headEnd, page.length());    
        } else {
            res = "<head>" + css + "</head>" + page;
        }
        return res;
    }

    /**
     * Fetches url content and returns it as string
     */
    private String WGet(String webUrl) {
        StringBuilder total = new StringBuilder();
        try {
            URL url = new URL(webUrl);
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            InputStream is = connection.getInputStream();
            String encoding = connection.getContentEncoding();
            if (encoding == null) {
                encoding = mDefaultEncoding;
            }
            BufferedReader r = new BufferedReader(new InputStreamReader(is, encoding));
            String line;
            while ((line = r.readLine()) != null) {
                total.append(line);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }

        return total.toString();
    }

    /**
     * Read CSS file from assets
     * @return String with the format '<style> xxxx </style>'
     */
    private String buildCss() {
        StringBuilder contents = new StringBuilder();

        InputStreamReader reader;
        try {
            reader = new InputStreamReader(mContext.getAssets().open(mCss), mDefaultEncoding);
            BufferedReader br = new BufferedReader(reader);

            String line;
            while ((line = br.readLine()) != null) {
                contents.append(line);
            }
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "<style>" + contents.toString().trim().replace("\n", "") + "</style>";

    }

    
    public void setDefaultEncoding(String encoding) {
        mDefaultEncoding = encoding;
    }
}

assets目录下的两个文件:

文件1: customStyle.css

a {
 color: #A4C639 !important;
 font-weight: bold;
} 

文件2: resultados.css

h1, h2 {
    color: red;
}

ul.tabmain a{
    color: green;
}

同理 JavaScript 也是类似的思路. 有兴趣小伙伴可以去试一下.