Question

I want load data from json into WebView! for this job i should use custom webView! such as : custom Font, Background, Direction and more ...

I write this codes for custom webView :

    String style = "@font-face {font-family: \"MyFont\";src: url('file:///android_asset/fonts/iran_sans_mobile.ttf');} " +
            "body {background:#FFFFFF;} div,h1,h2,p,h3 { font-family:\"MyFont\";line-height:30px;  " +
            "text-align: justify; color: #2d2d2d ;direction: rtl}";

And this codes has set content into webview :

 if (content != null) {

            post_content_web.getSettings().setJavaScriptEnabled(true);

            WebSettings settings = post_content_web.getSettings();
            settings.setDefaultTextEncodingName("utf-8");

            String style = "@font-face {font-family: \"MyFont\";src: url('file:///android_asset/fonts/iran_sans_mobile.ttf');} " +
                    "body {background:#FFFFFF;} div,h1,h2,p,h3 { font-family:\"MyFont\";line-height:30px;  " +
                    "text-align: justify; color: #2d2d2d ;direction: rtl}";

            post_content_web.loadData(content, "text/html; charset=utf-8", "utf-8");
        }

But i don't know how to set this customize into my webview !

How can i set this customize into webview? Thanks all <3

Answer 1

设置WebViewClient以收听页面加载事件，并注入您的css样式代码：

...

String style = "@font-face {font-family: \"MyFont\";src: url('file:///android_asset/fonts/iran_sans_mobile.ttf');} " +
                    "body {background:#FFFFFF;} div,h1,h2,p,h3 { font-family:\"MyFont\";line-height:30px;  " +
                    "text-align: justify; color: #2d2d2d ;direction: rtl}";

post_content_web.setWebViewClient(new WebViewClient() {

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

        // Inject CSS
        post_content_web.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                "style.innerHTML = " + style + ";" +
                "parent.appendChild(style)" +
                "})()");

        super.onPageFinished(view, url);
    }
});

post_content_web.loadData(content, "text/html; charset=utf-8", "utf-8");

...

Answer 2

尝试以下代码：

if (content != null) {

    post_content_web.getSettings().setJavaScriptEnabled(true);

    WebSettings settings = post_content_web.getSettings();
    settings.setDefaultTextEncodingName("utf-8");

    String myCustomStyleString = "<style type=\"text/css\">@font-face {font-family: MyFont;src: " +
            "url(\"file:///android_asset/fonts/iran_sans_mobile.ttf\")}body,* {font-family: MyFont; font-size: " +
            "medium;text-align: justify;}</style>";

    post_content_web.loadDataWithBaseURL("", myCustomStyleString + "<div style=\"direction:rtl\">"
            + content + "</div>", "text/html", "utf-8", null);
}

How to customize WebView in Android

2 个答案: