如何在android webview中使用turn.js
如何在android webview中使用turn.js
提问于 2018-01-27 04:41:05
我是android的初学者，如果我的问题很愚蠢，请原谅。我想在android webview中实现turn.js库来展示我读到的关于WebView的book.As，它可以运行javascript，所以我想知道在android中有没有使用turn.js的地方。我已经引用了这个链接 turn.js website
JS代码：
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>回答 1
Stack Overflow用户
发布于 2018-01-27 05:09:54
首先，你必须加载带有脚本的网页到WebView。
我使用Monocle lib来展示书籍，所以我将html、js和css文件放到了assets文件夹中
这是我的mono.html，您正在使用turn.js库，因此您可以在库samples中找到示例网页。
<head>
<!-- Include the Monocle library and styles -->
<script src="scripts/monocore.js"></script>
<link rel="stylesheet" type="text/css" href="styles/monocore.css" />
<script src="scripts/monoctrl.js"></script>
<link rel="stylesheet" type="text/css" href="styles/monoctrl.css" />
<style>
#reader { width: 100%; height: 100%;}
</style>
<script>
function createBookTitle(reader, contactListeners) {
var bt = {}
bt.createControlElements = function () {
cntr = document.createElement('div');
cntr.className = "bookTitle";
runner = document.createElement('div');
runner.className = "runner";
runner.innerHTML = reader.getBook().getMetaData('title');
cntr.appendChild(runner);
if (contactListeners) {
Monocle.Events.listenForContact(cntr, contactListeners);
}
return cntr;
}
reader.addControl(bt, 'page');
return bt;
}
</script>
</head>
<body>
<div id="reader"></div>
<script type="text/javascript">
Monocle.Events.listen(
window,
'load',
function () {
var readerOptions = {
panels: Monocle.Panels.Magic
};
Monocle.Reader('reader', bookData, readerOptions, function (rdr)
{
window.reader5 = rdr;
var toc = Monocle.Controls.Contents(rdr);
rdr.addControl(toc, 'popover', { hidden: true });
createBookTitle(
rdr,
{
start: function () {
rdr.showControl(toc);
}
}
);
});
}
);
</script>
</body>在此之后，您可以在web视图中显示此页面
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/html/mono.html");最后一步是将图书内容加载到此页面中。我编写了一个帮助器，将图书文件转换为带有"javascript:“前缀的JS图书对象https://github.com/joseph/Monocle/wiki/Book-data-object。所以它看起来像是"javascript: var bookData = {....“并加载此脚本
webView.loadUrl(bookData);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48469213
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号