Google 图书查看器 API - 无法先隐藏再显示

Question

我正在使用 Google 图书查看器 API 根据在页面上找到的元数据显示图书预览。这是在我无法控制的系统中，尽管我可以附加脚本和标记。

只有部分页面包含有关提供预览的图书的信息。图书查看器位于 div 中，如果未找到预览，则它是空的并且看起来很可笑；所以我的策略是通过 CSS 隐藏 div，然后，如果找到预览，更改 div 的 ID，使其不再隐藏。但是，如果我这样做，当 div 出现时，预览不会正确显示；如果你用浏览器放大和缩小，它会，但否则不会。

这是一个工作示例。（我已经简化了脚本——通常我遍历页面以获取元数据，而在这里我只是以字符串的形式提供它。）除了 CSS 之外的所有内容都在那里： https://googledrive.com/host/0BxoVkXnTNNDoV3NpQUtsNDEyaTQ/gbpreview.htm

这里是 CSS，不起作用： https://googledrive.com/host/0BxoVkXnTNNDoV3NpQUtsNDEyaTQ/gbpreview2.htm

任何人都知道我可以如何解决这个问题，或者你能想到一个替代策略来实现我正在寻找的东西吗？

这是代码：

<style type="text/css">#GoogleBooksPreview {display: none;} </style>
<div id="GoogleBooksPreview">
    <div id="viewerCanvas" style="height: 600px;">
    </div>
</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">var gbsWidget = document.getElementById('GoogleBooksPreview');
function gbsFound() {
    gbsWidget.id = 'gbsFound';
}
function initialize() {
    var viewer = new google.books.DefaultViewer(document.getElementById('viewerCanvas'), {
        showLinkChrome: false
        });
   viewer.load(['ISBN:9780596805524', 'OCLC:502415271'], null, gbsFound);
    }
    google.load("books", "0");
    google.setOnLoadCallback(initialize);
</script>

Answer 1

看起来推荐的处理方法是在失败时隐藏 div，而不是在成功时取消隐藏 div，请参阅 here。我猜这是必要的，因为查看者需要知道 canvas 的高度（如果容器被隐藏，它就不会知道）。

在此处查看工作示例：http://jsfiddle.net/67pay4r2/。

或不添加 hidden class，例如：http://jsfiddle.net/67pay4r2/1/.

我已将 hidden class 添加到小部件 div，当 initialize 功能启动时将其删除，然后在查看器加载失败时添加回来.这将防止禁用 JS 的用户看到 div.

Google 图书查看器 API - 无法先隐藏再显示

Google Book Viewer API - can't hide then show

javascript

google-books