我有一本 epub3 书，有 2 页和目录页。我正在 Apple 的图书中查看这本书，他们的内置 epub3 阅读器，在 Mac OSX 上。两个页面并排显示。第一页如下:
<?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 将当前时间保存到本地存储作为 t1，页面 2 对值 t2 执行相同的操作。同时，两个页面都从本地存储中读取 t1 和 t2，然后再将它们的值显示到屏幕上。但是在 ibooks 中，页面 1 仅在重新加载页面时设法显示 t2 的当前值 - 就像我翻到目录然后再次返回页面 1 和 2 时一样。关于 t1，Page 2 也发生了类似的事情。
所以在时间 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
我也尝试过使用 session 数据，但页面 1 永远无法读取 t2，而页面 2 也无法读取 t1。因此，这将改为显示:
08/09/19，21:09:18 空
我可以想到几个应用程序，在这些应用程序中，页面相互通信非常有用。
例如，如果一个视频正在一个页面上播放，如果另一个页面上的视频开始播放则停止它会很有用。这通常使用 session 存储来完成。这与我自己的用例有关，也是我开始探索这个问题的原因。
同样，如果要求用户在第 1 页输入故事主 Angular 的姓名，则该条目应在输入后立即出现在第 2 页。
除了 Local 或 Session Storage 之外，Pages 在 epub3 中还有其他方式相互通信吗？
最佳答案
我不知道 epub3，也没有要测试的 MAC，但我想到了以下四种可能的解决方案:
Cookies
对于该用例，它的性能不如 localStorage，但如果您没有太多选择，那总比没有好。
创建、读取和删除 cookie 的函数(致谢https://stackoverflow.com/a/28230846/9150652):
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;';
}
示例的用法:
<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>
广播 channel
BroadcastChannel 是一项非常新的功能，因此“图书”应用程序可能不支持它。但这里有一个概念:
<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>
某种后端
如果以上方法都不起作用，您可能别无选择，只能使用某种后端来提供和保存数据
如果它只适合您，我建议您使用 Firebase 或 MongoDB Atlas 的免费套餐，因为它们都在其免费套餐上提供了相当大的值(value)。
如果你用后端来做，它可以用这样的东西来完成:
<script>
//<![CDATA[
var current_page = "1";
var other_page = "2";
var lastLocalDate = new Date();
const serverUrl = "http://someUrl.com/endpoint/"
// Gets the latest date of the other page via ajax
function getUpdate() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
// If successful, update HTML
if (xmlhttp.status == 200) {
document.getElementById("result").innerHTML = lastLocalDate.toLocaleString() +" "+xhr.responseText;
}
// Update the date of this page anyways
sendUpdate();
}
};
// GET request with parameter requestingPage, which is the other page
xmlhttp.open("GET", serverUrl, true);
xmlhttp.send(`requestingPage=${other_page}`);
}
// Sends the current date of this page to the webserver
function sendUpdate() {
var xmlhttp = new XMLHttpRequest();
// No need to check if successful, just update the page again
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
getUpdate();
}
};
lastLocalDate = new Date();
// POST request with parameters page and date
xmlhttp.open("POST", serverUrl, true);
xmlhttp.send(`sendingPage=${current_page}&data=${lastLocalDate.toLocaleString()}`);
}
// Start with sending an update (so that lastLocalDate is at least sent once to the server)
sendUpdate();
//]]>
</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"
},
// ...
]
窗口引用
如果 Books 应用从第一个选项卡打开第二个选项卡，可能值得研究一下:
- Window.postMessage()
- 其功能:
- Window.open() 打开第二个选项卡并获取对它的引用
- 和Window.opener获得开瓶器的引用
关于javascript - 页面之间不共享本地存储，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55971432/