时间戳

首页 > 解决方案 > 在 epub 中使用 JavaScript 在单击按钮时显示元素并记住其在以下页面上的值

javascript - 在 epub 中使用 JavaScript 在单击按钮时显示元素并记住其在以下页面上的值

问题描述

我正在使用 InDesign 制作 epub。我在文档的母版页上创建了一个按钮和一个覆盖一些文本的元素。如果单击按钮，元素应该消失以显示下面的内容。我想实现，通过单击按钮保存按钮的状态，因此当翻页时，它与之前的页面相同（覆盖或未覆盖），直到用户再次单击。我写了一个 JavaScript，因为我认为我可以一次“操纵” epub 的所有页面来实现这一点。不幸的是，我的方法有两个问题，可能是相关的，所以我将它们一起发布：

1） 我在导出窗口中添加了 js 文件，InDesign 自动将脚本标签导入到每个 xhtml 文件的头部中的 js 文件中。当我打开一个 xhtml 文件时，我收到“未捕获的类型错误：无法读取未定义的属性‘样式’”错误。但是脚本有效，当我手动将它放在正文部分的末尾时。

var cover = document.getElementsByClassName("cover")[0];
var button_none = document.getElementsByClassName("button_none")[0];
var button_inline = document.getElementsByClassName("button_inline")[0];

// var button_status = 1;

if (button_status ==1){
    button_none.style.display ="inline";
    button_inline.style.display ="none";
    cover.style.display = "inline";
}
else{
    button_none.style.display ="none";
    button_inline.style.display ="inline";
    cover.style.display = "none";
}

button_none.onclick = function() {
    cover.style.display ="none";
    button_none.style.display ="none";
    button_inline.style.display = "inline";
    // button_status = 0;
    // return button_status;
    }

button_inline.onclick = function() {
        cover.style.display ="inline";
        button_none.style.display ="inline";
        button_inline.style.display = "none";
        // button_status = 1;
        // return button_status;
        }

因为 epub 的每个页面都是一个单独的 xhtml 文件，所以在每个文件中更改它非常耗时。也许有更好的方法来完成这项工作，或者这甚至与第二个问题有关？

2） 因为每个页面都是一个单独的 xhtml 文件，所以我使用变量“保存”按钮状态的方法不起作用，因为它在下一页上不一样。我从来没有在不同文件之间传递变量，这就是为什么我不知道我的方法是否可以像我想的那样工作，当我弄清楚如何传递变量时？

另一个想法是设置一个“数据值”来保存按钮状态，但是我也不知道如何在我的 100 多页 epub 中传递它。我对此进行了一些研究，但只找到了表单的获取方法，但在我的情况下我什么也不能使用。


如果有人能帮我解决这个问题，我会很高兴，因为我自己尝试，我一无所获。也许我的整个方法从一开始就不好？

在桌面上我使用 AZARDI 打开 epub，在移动 Kobo Books 或 Infinity 阅读器和 Chrome 上检查 xhtml 文件。

标签： javascriptxhtmlepub

解决方案

EPUB3 查看器在有限的浏览器环境中运行。它们与完整的网络浏览器有很多相同的功能，但不是全部。您提到您打开了其中一个生成的 XHTML 文件，但您没有说明如何打开。如果您使用 Firefox 或 Google Chrome，则说明您没有正确测试文件。

可以对 EPUB3 中的多个页面进行批量编辑，但使用 Calibre 这样做可能会更好。https://calibre-ebook.com/

Calibre 也可以帮助您诊断和修复您遇到的样式错误。

一些（但肯定不是全部）EPUB3 查看器支持 localStorage API。您应该尝试存储需要在页面之间访问的信息。我找到了一个演示该技术的示例 repo：https ://github.com/AnadoluUniversity/Localstorage-with-EPUB3-master

推荐阅读