Bootstrap/JQuery 不工作 Android Webview
Posted
技术标签:
【中文标题】Bootstrap/JQuery 不工作 Android Webview【英文标题】：Bootstrap/JQuery not working Android Webview 【发布时间】：2018-08-31 04:42:22 【问题描述】：我的代码在浏览器中打开时可以正常工作，但 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);
任何帮助将不胜感激。
【问题讨论】：
【参考方案1】：您的代码看起来不错，并且所有来自 CDN 的 URL 都是可连接的。我可以alert 使用jQuery。所以确定
index.html 位于app/src/main/assets/www/
试试下面的 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>
【讨论】：
没有代码我帮不了你，但首先要确保你的 Java 文件看起来像这个问题，而 HTML 文件看起来像我的答案。以上是关于Bootstrap/JQuery 不工作 Android Webview的主要内容，如果未能解决你的问题，请参考以下文章
带有 Google Docs IFRAME 的 Bootstrap/JQuery 响应式/居中模式
带有 wordpress jquery 的 Bootstrap 4