Question

我一直在寻找解决方案的时间;虽然有类似的情况，我认为我的情况有点不同。我有一个网站，我正在加载到webview

    setContentView(R.layout.activity_main);
    WebView myWebView = (WebView) findViewById(webview);
    myWebView.loadUrl("http://my-website.com/index.php");
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);

    myWebView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
            view.loadUrl(request.toString());
            return true;
        }
    }); }

它正在加载网站。没有问题。我正在尝试做什么（因为有很多CSS和JS文件）是从Android应用程序的assets文件夹加载这些文件 - 我试图让页面加载速度更快。

<link href="file:///android_asset/css/keyframes.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/materialize.min.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/swiper.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/swipebox.min.css" rel="stylesheet" type="text/css">
<link href="file:///android_asset/css/style.css" rel="stylesheet" type="text/css">

目前没有加载任何以这种方式调用的CSS文件。我真的不是故意用一个简单的问题纠缠任何人，这只是困扰我，我对Java不好。此外，这不是本地HTML页面。这是从远程服务器加载的PHP页面。

Answer 1

我不是移动开发人员，但我是一名网络开发人员，为我的移动开发人员同事编写了一些webview页面。

据我所知，您无法访问webview中的文件系统。但是，您可以让您的应用缓存css / js文件。

viewer.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT)

（这是来自stackoverflow上的answer）（这里是document on cache settings）

通过使用默认缓存设置，CSS / JS文件将在第一次下载后缓存，因为它是在普通浏览器中缓存的。所以你可以简单地使用

<link href="https://your.domain/css/style.css" rel="stylesheet" type="text/css">

以实现您想要的更快的页面加载。

Answer 2

如果你想从本地资产文件夹加载css和js，那么首先你需要下载你的网页，然后你需要像下面那样传入网络浏览器，

下载数据就像使用它一样：

public String getHtmlContent(String urlToLoad) {
        String outputStr = "";
        BufferedReader inputString = null;
        try {
            URL urlLoad = new URL(urlToLoad);
            inputString = new BufferedReader(new InputStreamReader(urlLoad.openStream()));
            String str;
            while ((str = inputString.readLine()) != null) {
                outputStr += str;
            }
        } catch (MalformedURLException e) {
        } catch (IOException e) {
        } finally {
            if (inputString != null) {
                try {
                    inputString.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
        return outputStr;
    }

然后，您需要将您的js和css文件放在资产文件夹中，然后需要在网页中定义一个URL，如下所示

<script src="file:///android_asset/jquery.min.js" type="text/javascript"></script>

您需要使用类似file:///android_asset/的所有网址，然后在您的css或js名称之后设置

完成所有操作后，您需要使用webview设置网页内容，如下所示

String webData = getHtmlContent("http://webisteaddress.com/index.html");
    mWebView.loadDataWithBaseURL("file:///android_asset/", webData, "text/html", "utf-8", "");

Answer 3

Use this function to load CSS & JavaScript inside your WebView: inject both CSS & JavaScript inside onCreate() on WebViewClient:

     webView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url)
        {
            injectJavaScript(view);
            injectCSS();

         }

Create two methods to inject JavaScript & CSS(from res/raw):

    private boolean injectJavaScript(WebView view){
        view.loadUrl("javascript:(function() { " +
            "var head = document.getElementsByTagName('header')[0];"
            + "head.parentNode.removeChild(head);" + "console.log('true');"+
            "})()");
        view.loadUrl("javascript:(function() { " +
            "var footer = document.getElementsByTagName('footer')[0];"
            + "footer.parentNode.removeChild(footer);" +
            "})()");
        view.loadUrl("javascript:(function() { " +
            "var nav = document.getElementsByTagName('nav')[0];"
            + "nav.parentNode.removeChild(nav);" +
            "})()");
        view.loadUrl("javascript:(function() { " +
            "var set = document.getElementsByClassName('banner');"
            + "set[0].style.margin = '0px';" +
            "})()");
    return true;
    }
    private void injectCSS() {
    try {
        InputStream inputStream = getResources().openRawResource(R.raw.css);
        byte[] buffer = new byte[inputStream.available()];
        inputStream.read(buffer);
        inputStream.close();
        String encoded = Base64.encodeToString(buffer, Base64.NO_WRAP);
        wv1.loadUrl("javascript:(function() {" +
                "var parent = document.getElementsByTagName('head').item(0);" +
                "var style = document.createElement('style');" +
                "style.type = 'text/css';" +
                "style.innerHTML = window.atob('" + encoded + "');" +
                "parent.appendChild(style)" +
                "})()");

    } catch (Exception e) {
        e.printStackTrace();
    }
}

This worked for me like a charm.

Answer 4

使用<link rel="stylesheet" href=""/>加载CSS将是deprecated in March 2018。我今天在Developer Console中收到了一条警告信息。

这是因为在所有CSS加载之前，页面上没有任何内容呈现。

相反，建议是我们load the CSS using JavaScript, and have a small inline stylesheet to render the basic look of the page;加上页面每个部分的单独样式表，这些样式表是从<body>而不是<head>调用的。

从Assets文件夹加载CSS JS

4 个答案: