从 Assets 文件夹加载 CSS JS答案

【问题标题】：Load CSS JS from Assets folder从 Assets 文件夹加载 CSS JS
【发布时间】：2017-12-09 21:49:28
【问题描述】：

我一直在寻找几个小时的解决方案；虽然有类似的情况，但我认为有点不同。我有一个要加载到 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 应用程序的资产文件夹中加载这些文件 - 我正在尝试加快页面加载速度。

<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 页面。

【问题讨论】：

如果您暂时将 HTML 的副本放在 assets/ 中并从那里将其加载到 WebView 中，是否有效？
"file:///。不应该是"file:// 吗？
试过了。我遇到了同样的问题。没有文件被加载。 @greenapps
资产中有css文件夹？
如果你想要真正的性能，缓存输出并将输出放置在请求的确切位置。通过在不存在的文件上重写 index.php，编译完成一次，然后将输出写入例如/assets/asdugh3e9adHASH.css ( /assets/asdugh3e9adHASH.css > index.php?path=$1) 唯一标识符必须通过收集文件修改时间/文件名和散列来确定。这样一来，PHP 甚至不会在加载现有资产集时执行。

标签： android html

【解决方案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">

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

【讨论】：

【解决方案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/ 设置所有 url，然后在您的 css 或 js 名称之后，

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

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

【讨论】：

【解决方案3】：

使用此函数在您的WebView 中加载 CSS 和 JavaScript：在 WebViewClient 上的 onCreate() 中注入 CSS 和 JavaScript：

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

         }

创建两个注入 JavaScript 和 CSS 的方法（来自 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();
    }
}

这对我来说就像一个魅力。

【讨论】：

你也可以分享你的css文件吗？我只是想替换通过 webview 中的 url 加载的实际字体。我只是在资产中添加了我自己的字体，并试图像你一样唤醒我自己的 CSS，但我没有成功。请帮忙。
对我不起作用，不知道为什么

【解决方案4】：

使用<link rel="stylesheet" href=""/> 加载CSS 将是deprecated in March 2018。我今天刚刚在开发者控制台中收到了一条警告消息。

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

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

【讨论】：