如何在Android WebView中使用turn.js

Question

我是android的初学者，所以如果我的问题很愚蠢，请原谅。 我想在android webview中实现turn.js库来显示书。当我了解WebView它可以运行javascript所以我想知道是否仍然可以在android中使用turn.js 我已经提到了这个链接turn.js网站

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");

最后一步是将书籍内容加载到此页面中。 我写了一个将书文件转换为JS书对象https://github.com/joseph/Monocle/wiki/Book-data-object并带有“ javascript：”前缀的助手。 因此它看起来像“ javascript：var bookData = {....”并加载此脚本

webView.loadUrl(bookData);

如何在Android WebView中使用turn.js

问题描述

1 个解决方案

解决方案1
1 2018-01-26 21:09:53

如何在Android WebView中使用turn.js

问题描述

1 个解决方案

解决方案1 1 2018-01-26 21:09:53

解决方案1
1 2018-01-26 21:09:53