2

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

只有一些页面包含有关可以预览的书籍的信息。图书查看器位于一个 div 中，如果未找到预览，则该 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>
4

1 回答 1

1

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

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

或者不添加类似的hidden类：http: //jsfiddle.net/67pay4r2/1/。

我hidden在小部件 div 中添加了一个类，该类在函数启动时被删除initialize，然后在查看器加载失败时添加回来。这将防止禁用 JS 的用户看到 div。

于 2015-05-21T18:27:13.527 回答