Question

我是android的初学者所以请原谅我，如果我的问题是愚蠢的。我想在android webview中实现turn.js库以显示书籍。当我读到WebView时，它可以运行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>

Answer 1

首先，您必须将带有脚本的网页加载到WebView。

我使用Monocle lib来显示书籍，所以我将html，js和css文件放入资源文件夹

这是我的mono.html 您正在使用turn.js库，因此您可以在库样本中找到示例网页。

<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>

之后，您可以在网页视图中显示此页面

webView.getSettings().setJavaScriptEnabled(true);
webView.setWebChromeClient(new WebChromeClient());
webView.loadUrl("file:///android_asset/html/mono.html");

，最后一步是将书籍内容加载到此页面中。我写了一个帮助器，用＃34; javascript：＆＃34;将书籍文件转换为JS书籍对象https://github.com/joseph/Monocle/wiki/Book-data-object。字首。所以它看起来像＆＃34; javascript：var bookData = {....＆＃34; 并加载此脚本

webView.loadUrl(bookData);

如何在android webview中使用turn.js

1 个答案: