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

huangapple go评论76阅读模式
英文:

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

问题

我在InDesign中制作epub文件。我在文档的主页上创建了一个按钮和一个覆盖文本的元素。如果单击按钮,元素应该消失以显示下面的内容。我想通过单击按钮来保存按钮的状态,所以当翻页时,按钮的状态与前一页相同(覆盖或不覆盖),直到用户再次单击。

我编写了JavaScript代码,因为我认为这样可以同时“操作”epub的所有页面以实现这一目标。不幸的是,我的方法有两个问题,可能与此相关,所以我一起发布它们:

1)
我将js文件添加到导出窗口中,InDesign会自动将用于导入js文件的script标签放在每个xhtml文件的head部分。当我打开xhtml文件时,我会收到一个“Uncaught TypeError: Cannot read property 'style' of undefined”错误。但是,当我将它手动放在body部分的末尾时,脚本可以正常工作。

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文件,我用于“保存”按钮状态的变量的方法不起作用,因为下一页的状态不同。我从未在不同文件之间传递变量,所以我不知道我的方法是否能够像我想象的那样工作,当我弄清楚如何传递变量时?

另一个想法是设置一个“data-value”来保存按钮的状态,但是对于我100多页的epub,我也不知道如何传递它。我进行了一些关于此的研究,但只找到了用于表单的get方法,对于我的情况来说并不适用。

我会很高兴如果有人能帮助我解决这个问题,因为我自己尝试了很久也没有取得任何进展。也许从一开始我的整个方法都不好?在桌面上,我使用AZARDI打开epub,在移动设备上使用Kobo Books或Infinity阅读器,以及Chrome来检查xhtml文件。

英文:

I´m working on an epub in InDesign. I created a button on the Master page of the document and an element who covers some text. If the button is clicked, the Element should disappear to display the content beneath. I would like to achieve, that by clicking the button the state of the button is saved, so when turning the page its the same (covered or uncovered) as on the page before, till the user clicks again.
I wrote a JavaScript, because I thought with that I could "manipulate" all pages of the epub at once to achieve this. Unfortunately my method has two issues, which may be related so I post them together:


1)
I add the js-file in the export window and InDesign automatically puts the script-tag to import the js-file it in the head-section of every xhtml-file. When I open a xhtml-file I get an "Uncaught TypeError: Cannot read property 'style' of undefined" error. But the script works, when I manually put it at the end of the 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;
		}

Because every page of the epub is an individual xhtml-file it´s time-consuming to change it in every file. Maybe there´s a better way to make this work or maybe this is even connected to the second issue?

2)
Because every page is an individual xhtml-file, my approach of using a variable for "saving" the buttons state is not working, because its not the same on the next page. I never worked with passing variables between different files that´s why I don´t know if my approach could even work like I think it could when I figure out how to pass the variable?

Another idea was to set a "data-value" which saves the buttons state, but with this I also don´t know how to pass it in my 100+ pages epub. I did some research about it but only found get-methodes for forms, but nothing I could use in my case.


<br />
I'd be happy if someone could help me with this, cause with trying by myself I'm not getting anywhere. Maybe my whole approach is not good from the beginning?

On Desktop I use AZARDI for opening the epubs, on mobile Kobo Books or Infinity reader and Chrome to inspect the xhtml files.

答案1

得分: 0

EPUB3 视图器在有限的浏览器环境中运行。它们具有与完整的网络浏览器相同的许多功能,但并非全部。您提到您打开了其中一个生成的XHTML文件,但没有说明如何操作。如果您使用了Firefox或Google Chrome,那么您可能没有正确测试该文件。

EPUB3 中可以对多个页面进行批量编辑,但使用Calibre可能会更容易成功。https://calibre-ebook.com/

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

一些EPUB3视图器支持localStorage API,但并非全部。您可以尝试使用它来存储需要在页面之间访问的信息。我找到了一个演示这一技术的示例仓库:https://github.com/AnadoluUniversity/Localstorage-with-EPUB3-master

英文:

EPUB3 viewers operate in a limited browser environment. They have much of the same functionality as a full web browser, but not all. You mentioned that you opened one of the generated XHTML files, but you didn't say how. If you used Firefox, or Google Chrome, you aren't testing the file correctly.

Bulk edits to multiple pages in an EPUB3 can be done, but you'll likely have better luck using Calibre to do so. https://calibre-ebook.com/

Calibre can help you diagnose and repair the style error you encountered too.

Some, but certainly not all, EPUB3 viewers support the localStorage API. You should try that to store information that needs to be accessible between pages. I found an example repo that demonstrates the technique: https://github.com/AnadoluUniversity/Localstorage-with-EPUB3-master

huangapple
  • 本文由 发表于 2020年1月4日 00:57:47
  • 转载请务必保留本文链接:https://go.coder-hub.com/59582420.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定