【发布时间】：2023-04-01 02:57:01
【问题描述】：
我想在 Webview 中显示简单的引导 Jquery 的引导表。
在桌面浏览器上运行良好，但在 webview 的 Chrome 调试器中会抛出以下异常。
Android Webview Uncaught ReferenceError: $ is not defined
Webview的设置方式如下：
public void setWebview() {
try {
AssetManager mgr = getBaseContext().getAssets();
mWebView = (WebView) findViewById(R.id.intro_browser);
InputStream in = mgr.open("www/table.html", AssetManager.ACCESS_BUFFER);
String htmlContentInStringFormat = StreamToString(in);
in.close();
// Set Chrome instead of the standard WebView
mWebView.setWebChromeClient(new WebChromeClient());
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setAllowFileAccessFromFileURLs(true);
mWebView.getSettings().setAllowUniversalAccessFromFileURLs(true);
mWebView.clearCache(true);
mWebView.clearHistory();
mWebView.getSettings().setAllowContentAccess(true);
mWebView.getSettings().setBlockNetworkImage(false);
mWebView.loadDataWithBaseURL(null, htmlContentInStringFormat, "text/html", "utf-8", null);
} catch (Exception e) {
Log.d("TEST", e.getMessage());
}
}
assets/www 文件夹中的 HTML 如下：
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Table Fixed Header</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="bower_components/jquery/src/jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<style>
.table-responsive>.fixed-column {
position: absolute;
display: inline-block;
width: auto;
border-right: 1px solid #ddd;
}
@media(min-width:768px) {
.table-responsive>.fixed-column {
display: none;
}
}
/*Heading */
</style>
</head>
<body>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-condensed header-fixed">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
</div>
<script>
$( document ).ready(function() {
console.log( "ready!" );
var $table = $('.table');
var $fixedColumn = $table.clone().insertBefore($table).addClass('fixed-column');
$fixedColumn.find('th:not(:first-child),td:not(:first-child)').remove();
$fixedColumn.find('tr').each(function (i, elem) {
$(this).height($table.find('tr:eq(' + i + ')').height());
});
//ALert is not called in the Webview
alert("TEST");
});
</script>
</body>
</html>
请问我该如何解决？非常感谢您的任何建议。
【问题讨论】：
-
如果android app中有
bower_components，那么依赖是怎么安装的，bower install？ -
是的，但这仅用于测试目的。
-
我也有同样的问题 :(
-
同样的问题。请分享解决方案。 :(
标签： javascript android jquery twitter-bootstrap webview