当在iBooks中翻页时,JavaScript 间歇性触发

4

我在尝试为电子书添加播放音频的功能,使用户可以暂停和开始播放。

我可以通过控制页面上的标准HTML5音频标签来使用javascript实现这一点,但当用户翻开下一页时,我希望下一页能记住状态,即音频是否已暂停。

问题似乎是每次翻页时javascript有时会触发,有时不会。我尝试添加一个标准监听器

'document.addEventListener("DOMContentLoaded", function(event) { `

在HEAD中,但是这并不总是在翻页时触发。我在Chrome中尝试时完美地工作。

任何帮助将不胜感激。

编辑:这是我正在尝试运行的代码:

document.addEventListener("DOMContentLoaded", function(event) { 
  do work
    if (document.getElementById("audioreadalong") && localStorage.playaudio == "1"){
        if (localStorage.isPaused == "0"){
            document.getElementById("audioreadalong").play();
            if (document.getElementById("play") && document.getElementById("pause")){
                document.getElementById("play").setAttribute("style", "display: none;");
                document.getElementById("pause").setAttribute("style", "display: block;");
            }
        }
        else if (localStorage.isPaused == "1"){
            document.getElementById("audioreadalong").pause();
            if (document.getElementById("play") && document.getElementById("pause")){
                document.getElementById("play").setAttribute("style", "display: block;");
                document.getElementById("pause").setAttribute("style", "display: none;");
            }
        }
    }
    else if(localStorage.playaudio == "0"){
        if (document.getElementById("play") && document.getElementById("pause")){
            document.getElementById("play").setAttribute("style", "display: none;");
            document.getElementById("pause").setAttribute("style", "display: none;");
        }
    }
});

这段代码被引用在我需要音频的每个页面的头部(奇数页的右页而不是偶数页的左页 - 每个双页是2个独立的网页)。

该代码并不在每次翻页时运行。在Chrome中,每个页面都会重新加载,因此可以运行。我无法在epub3规范中找到任何解释。

最终编辑:我只能假设要么a)iBooks在页面上运行javascript时存在错误; 要么b)我配置了一些错误。 我通过使用苹果内置支持的“资产指南”中的Read Along Books,解决了我的问题。 我已经从iTunes下载了示例项目,并正在使用带有iBooks命名空间和iBooks.js(在示例项目中找到)的SMILs。 如果有人需要帮助,请发布一个问题并在此引用它。

感谢那些试图帮助或赞同此内容的人。


什么是页面跳转?你的第二个页面是在同一个 DOM 中还是在另一个网页中? - Rayon
这是另一个网页 - 它是一个固定布局的横向书籍。 - Guy Lowe
1个回答

0

您需要将音频的当前状态存储在本地存储中,方法如下:

localStorage.setItem("audioState", "true");

而只需使用以下代码检索localstorage的值:

localStorage.getItem("audioState");

并相应地实现条件...


谢谢Rayon,我正在做这件事,但问题是随着页面的翻转,代码不会每次都运行,原因未知。 - Guy Lowe
你能提供一下你代码的基本结构吗?你需要在“DOMContentLoaded”事件中从localstorage获取值。你能告诉我你从localstorage中得到了什么值吗? - Rayon

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接