Google Books Embedded Viewer API 示例 - Html

Google Books Embedded Viewer API 是一种可以嵌入 Google Books 电子书的 API，可以让用户直接在网站上阅读图书内容。用户可以翻页、搜索、缩放等操作，很方便。

用法

使用 Google Books Embedded Viewer API，我们需要引入以下代码：

<script src="https://www.google.com/books/jsapi.js"></script>

接下来，我们需要初始化 API，调用 load() 方法：

<script>
  google.books.load();
</script>

然后，我们可以在页面上创建一个 div 元素，用于嵌入电子书。注意，这个 div 的宽高要足够大，以容纳完整的电子书：

<div id="viewerCanvas" style="width: 700px; height: 700px"></div>

最后，我们调用 Viewer API 的 create() 方法，把 div 和图书 ID 作为参数传入：

<script>
  function initialize() {
    var viewer = new google.books.DefaultViewer(
      document.getElementById('viewerCanvas')
    );
    viewer.load('ISBN:0738531367');
  }
  google.books.setOnLoadCallback(initialize);
</script>

这个例子里，我们让 API 加载 ISBN 为 '0738531367' 的电子书。我们也可以使用其他参数来加载其他电子书。

API 参考

参考文档地址：https://developers.google.com/books/docs/viewer/reference

以下是一些常用的 API：

Viewer 类

Viewer 类是 Google Books Embedded Viewer API 的核心，它负责创建和管理电子书查看器。

• new google.books.DefaultViewer(container: Element)：创建一个新的 Viewer 实例，并把它放置在指定的 HTML 元素中。

• Viewer.load(contentUrlOrHtml, opt_options?)：加载一个电子书。contentUrlOrHtml 参数可以是图书的 URL 或者 HTML 内容。opt_options 参数是一个可选对象，用于配置查看器的一些选项，比如显示双页、自动翻页等等。

配置选项

Viewer.load() 方法的第二个参数是一个可选对象，可以用来配置一些选项。

以下是一些常用的选项：

• allowFullScreen: boolean：是否允许全屏模式。默认为 true。

• displayMode: string：显示模式。可选值为 'default'（默认）或 'doublePage'（双页）。默认为 'default'。

• enableAnnotations: boolean：是否允许用户添加或查看注释。默认为 true。

• enableBookmarks: boolean：是否允许用户添加或查看书签。默认为 true。

• enableFullScreen: boolean：是否显示全屏按钮。默认为 true。

• enableSearch: boolean：是否显示搜索框。默认为 true。

• horizontalScrolling: boolean：是否允许水平滚动。默认为 false。

• locale: string：语言代码。默认为浏览器的默认语言。

• pageId: string：要显示的页面 ID。默认为第一页。

• printButton: boolean：是否显示打印按钮。默认为 true。

• showImageGallery: boolean：是否显示图像库。默认为 true。

• showPageArrows: boolean：是否显示翻页按钮。默认为 true。

• showPageNumbers: boolean：是否显示页码。默认为 true。

• showPagingControl: boolean：是否显示页码控制。默认为 true。

• thumbnailSize: number：缩略图大小。默认为 80。

• verticalScrolling: boolean：是否允许垂直滚动。默认为 true。

事件

Viewer 类支持以下事件：

• viewchange：查看器视图更改时触发。

• pagechange：当前页更改时触发。

• scroll：查看器滚动时触发。

• zoomchange：查看器缩放更改时触发。

我们可以使用 addEventListener() 方法添加事件监听器，如下所示：

<script>
  var viewer = new google.books.DefaultViewer(
    document.getElementById('viewerCanvas')
  );

  viewer.load('ISBN:0738531367');

  viewer.addEventListener('viewchange', function(event) {
    console.log('View changed', event);
  });
</script>

总结

Google Books Embedded Viewer API 可以帮助我们轻松地在网站上嵌入 Google Books 电子书，并给用户提供更好的阅读体验。我们可以使用 Viewer API 的各种选项来自定义查看器的行为，还可以使用事件来监听查看器状态的变化。