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

Question

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

1) 我在导出 window 中添加 js-file，InDesign 自动将 script-tag 导入每个 xhtml-file 的 head-section 中的 js-file。当我打开 xhtml-file 时，出现 "Uncaught TypeError: Cannot read property 'style' of undefined" 错误。但是当我手动将它放在 body-section 的末尾时，该脚本有效。

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-file，所以 time-consuming 在每个文件中更改它。也许有更好的方法来完成这项工作，或者这甚至与第二个问题有关？

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

另一个想法是设置一个 "data-value" 来保存按钮状态，但是我也不知道如何在我的 100 多页 epub 中传递它。我对此做了一些研究，但只找到了 get-methodes 的表格，但在我的情况下我什么也用不了。

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

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

Answer 1

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

可以对 EPUB3 中的多个页面进行批量编辑，但使用 Calibre 完成此操作可能会更顺利。 https://calibre-ebook.com/

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

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

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

Use JavaScript in an epub to display an element when clicking a button an remember its value on the follwoing pages

javascript

xhtml

epub