Bootstrap/JQuery 不工作 Android Webview

Question

我的代码在浏览器中打开时可以正常工作，但 Bootstrap 和 JavaScript 不会在 Android webview 中加载。

index.html

<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <link rel="stylesheet" href="index.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script src="index.js"></script>
</head>
<div class="col-sm-12" id="header">
 <h1>Project Name</h1>
</div>
<div class="container-fluid" id="wrapper">
 <div class="row">
  <div class="col-sm-4" id="rowBlank"></div><div class="col-sm-3" id="rowFormControl"><input class="form-control" id="searchTerm" type="text"></div>
  <div class="col-sm-5" id="rowButtons"><button class="btn btn-primary btn-md" id="search" type="submit">Wiki</button><a href="https://en.wikipedia.org/wiki/Special:Random" class="btn btn-    primary btn-md" id="random" target="_blank">????</a></div>
 </div>
 <div class="col-sm-12" id="rowOutput">
  <h3 id="output"></h3>
  </div>
</div>

MainActivity.java

package my.work.domain.ProjectName;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.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 webView = (WebView)findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebChromeClient(new WebChromeClient());
    webView.loadUrl(url);
    }
}

任何帮助将不胜感激。

Answer 1

您的代码看起来不错，并且所有来自 CDN 的 URL 都是可连接的。我可以alert 使用jQuery。所以确定

1. index.html 位于app/src/main/assets/www/

2. 试试下面的 HTML 代码，如果 Jquery 加载成功会弹出消息

   <head>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
       <link rel="stylesheet" href="index.css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
       <script src="index.js"></script>
       <script type="text/javascript">
           $(document).ready(function() {
             alert("document ready occurred!");
           });
       </script>
   </head>
   <div class="col-sm-12" id="header">
   <h1>Project Name</h1>
   </div>
   <div class="container-fluid" id="wrapper">
   <div class="row">
   <div class="col-sm-4" id="rowBlank"></div><div class="col-sm-3" id="rowFormControl"><input class="form-control" id="searchTerm" type="text"></div>
   <div class="col-sm-5" id="rowButtons"><button class="btn btn-primary btn-md" id="search" type="submit">Wiki</button><a href="https://en.wikipedia.org/wiki/Special:Random" class="btn btn-    primary btn-md" id="random" target="_blank">????</a></div>
   </div>
   <div class="col-sm-12" id="rowOutput">
   <h3 id="output"></h3>
   </div>
   </div>