Baz*_*Baz 4 html javascript epub epub3
我有一本epub3书，有2页以及目录页。我正在Mac OSX上的Apple图书（内置的epub3阅读器）中查看这本书。这两个页面并排出现。第一页如下：
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=500, height=600"/>
</head>
<body>
<p id="result"></p>
<script>
//<![CDATA[
var current_page = "1";
var other_page = "2";
var t = 0;
setInterval(function() {
var d = new Date();
var storage = localStorage;
storage.setItem("t"+ current_page, d.toLocaleString());
document.getElementById("result").innerHTML = storage.getItem("t"+ current_page) +" "+storage.getItem("t"+ other_page);
}, 1000);
//]]>
</script>
</body>
</html>
第二页中唯一不同的是：
var current_page = "2";
var other_page = "1";
因此，第1页每秒钟将当前时间保存为Local Storage作为t1，第2页对值执行相同的操作t2。同时，这两个网页同时读取t1和t2从本地存储，它们的值显示屏幕前。但是，在ibook中，页面1仅t2在重新加载页面时才显示当前值-就像我翻到目录然后再次回到页面1和2一样。关于第2页，发生了类似的情况t1。
因此，在时间21:10:00，页面1可能显示：
08/09/19，21:09:18 08/09/19，21:08:58
和第2页：
08/09/19，21:09:22 08/09/19，21:08:01
我也尝试使用会话数据，但第1页无法读取，t2而第二页无法读取t1。因此，将改为显示：
19/08/09，21:09:18空
我可以想到几个应用程序，这对于Pages相互通信非常有用。
例如，如果视频在一页上播放，则在另一页上开始播放视频时停止它会很有用。通常可以使用会话存储来完成。这与我自己的用例以及我开始研究此问题的原因有关。
同样，如果要求用户在页面1上输入故事的主要角色的名称，则一旦输入，该条目应立即出现在页面2上。
除本地存储或会话存储外，Pages是否还有其他其他方式可以在epub3中彼此通信？
我不知道epub3，也没有要测试的MAC，但是我想到了以下四种可能的解决方案：
它的性能不如localStorage该用例好，但是如果您没有太多选择，总比没有好。
创建，读取和删除Cookie的功能（提供给/sf/answers/1976159251/的信用）：
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
您的示例的用法：
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name+'=; Max-Age=-99999999;';
}
BroadcastChannel是一项非常新的功能，因此“ Books”应用可能不支持它。但这是一个概念：
<script>
//<![CDATA[
var current_page = "1";
var other_page = "2";
var t = 0;
setInterval(function() {
var d = new Date();
setCookie("t"+ current_page, d.toLocaleString(), 100); // 100 days
document.getElementById("result").innerHTML = getCookie("t"+ current_page) +" "+getCookie("t"+ other_page);
}, 1000);
//]]>
</script>
如果以上方法均无效，则除了使用某种后端来提供和保存数据外，您别无选择。
如果只适合您，我建议您使用Firebase或MongoDB Atlas的免费层，因为它们在它们的免费层上都提供了一定的价值。
如果您使用后端进行此操作，则可以使用以下方法完成此操作：
<script>
//<![CDATA[
var broadcaster = new BroadcastChannel('test');
var current_page = "1";
var other_page = "2";
var t = 0;
setInterval(function() {
var d = new Date();
// Send message to all other tabs with BroadcastChannel('test')
bc.postMessage({
senderPage: "t"+ current_page,
date: d.toLocaleString()
});
}, 1000);
broadcaster.onmessage = (result) => {
if(result.senderPage == "t"+ other_page) { // If the message is from the other page
// Set HTML to current date + sent Date from other page
var d = new Date();
document.getElementById("result").innerHTML = d.toLocaleString() +" "+result.date;
}
};
//]]>
</script>
后端中的某些方法需要看起来像这样（请注意，这不是任何语言的有效代码）：
@GET
function getDate(requestingPageId)
find latest entry with page.id == requestingPageId
return page.date
@POST
function saveDate(savingPage, savingDate)
store new page element with
page.id = savingPage
page.date = savingDate
数据库中的集合如下所示：
[
{
id: 1,
date: "date"
},{
id: 2,
date: "date"
},{
id: 2,
date: "date"
},{
id: 1,
date: "date"
},
// ...
]
如果“图书”应用从第一个选项卡打开第二个选项卡，则可能值得研究：