Question

我正在开发和anroid应用程序，将显示事件的coundown。为此我使用html，css和java脚本，它在正常的html中工作正常。但是当我把它放在android studio中时，它显示了html带有WebView的页面，但它没有添加css ad javascript。我把java脚本和css放在同一个目录中。这是代码

<html>
<head>
	<link type="text/css" rel="stylesheet" href="flipclock.css" />


</head>
<body>

	<div class="clock-builder-output"></div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="flipclock.js"></script>
<style text="text/css">body .flip-clock-wrapper ul li a div div.inn, body .flip-clock-small-wrapper ul li a div div.inn { color: #CCCCCC; background-color: #333333; } body .flip-clock-dot, body .flip-clock-small-wrapper .flip-clock-dot { background: #323434; } body .flip-clock-wrapper .flip-clock-meridium a, body .flip-clock-small-wrapper .flip-clock-meridium a { color: #323434; }</style>
<script type="text/javascript">
$(function(){
	FlipClock.Lang.Custom = { days:'Days', hours:'Hours', minutes:'Minutes', seconds:'Seconds' };
	var opts = {
		clockFace: 'HourCounter',
		countdown: true,
		language: 'Custom'
	};  
	var countdown = 1495943700 - ((new Date().getTime())/1000); // from: 05/28/2017 09:55 am +0600
	countdown = Math.max(1, countdown);
	$('.clock-builder-output').FlipClock(countdown, opts);
});
</script>

</body>
</html>

这是WebView

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        String url = "file:///android_asset/www/index.html";
        WebView view = (WebView)this.findViewById(R.id.webView);
        view.getSettings().setJavaScriptEnabled(true);
        view.loadUrl(url);
        view.setWebViewClient(new MyBrowser());
    }
    private class MyBrowser extends WebViewClient {
        @Override
        public boolean shouldOverrideUrlLoading (WebView view,String url){
            view.loadUrl(url);
            return true;
        }
    }
}

Answer 1

你必须有两个文件夹，你的＆＃34;索引＆＃34;位于。可能发生的是外部踩到内部，所以你应该把javascript和css的引用放在内部。如果这不起作用，请尝试将引用放在外面。

问候。

Answer 2

要加载外部css和javascript文件，您需要使用与在html url中加载到webview中时类似的url构造。例如，您使用了：

    String url = "file:///android_asset/www/index.html";

作为文件的URL。要加载javascript，假设它位于同一个/asset/www/目录中，您可以在HTML中说：

    <script type="text/javascript" src="file:///android_asset/www/flipclock.js"/>

样式表文件将加载为：

    <link rel="stylesheet" type="text/css" href="file:///android_asset/www/myCss.css"/>

顺便说一句，要在KIT-KAT之前即时运行注入的javascript，请使用：

    webView.loadUrl("javascript:(function(){####JSGOESHERE####})();");

和KIT-KAT后使用：

    webView.evaluateJavascript("####JSGOESHERE####", null);

在Android应用程序中添加css和javascript

2 个答案: