使用javascript查找ibooks epub中当前视图页面的页码

Using javascript to find the page number of the current view page in an iboooks epub

本文关键字：视图 查找 javascript ibooks epub 使用      更新时间：2023-09-26

我正在为ibooks epub创建一个灯箱样式的div元素。我希望div显示在当前正在查看的页面上。如果图片在电子书的第二页，我希望灯箱显示在第二页。我设置了div的宽度和高度来填充屏幕。

document.getElementById("LightBoxDiv").style.width=window.innerWidth+"px";
document.getElementById("LightBoxDiv").style.height=window.innerHeight+"px";

如果我知道图像所在的页码，我可以手动设置div的固定顶值。我的设备的窗口高度为460px。因此，对于第二页的图像，顶部应该是460，这是第二页的开始。

document.getElementById("LightBoxDiv").style.top="460px";

然而，由于电子书是动态的，用户可以将文本的大小更改为更大或更小，因此页面可能会发生变化。我需要一种方法来设置基于当前页面动态的顶部。如果我知道当前正在查看的页码，我可以将div顶部设置为

var lighboxHeight = (pagenumber-1)*window.innerHeight;

我尝试使用window.pageYOffset来计算当前页面，但这总是给出一个0值，因为页面在电子书中不滚动。不幸的是，我找不到描述如何使用javascript访问页码的文档或任何参考。有人知道如何使用javascript访问或查找ibooks epub中的当前页码吗?

谢谢,克里斯托弗。

我相信我找到解决办法了。这个问题/答案很有帮助。

//window height
var winHeight = window.innerHeight;
//top of object to be placed in the lightbox
//can be any object
var curOjbTop = document.getElementById(svgId).getBoundingClientRect().top;
//body y value
var bodyTop = document.body.getBoundingClientRect().top;
//amount the object is shifted vertically downward from the top of the body element
var offset = curObjTop - bodyTop;
//page number of the object 
//this is actually 1 less than the true page number
//it basically starts the page count at 0, but for actual page number add 1
var curPage = Math.floor(offset/winHeight);
//this sets the top edge of the lightbox at y=0 on the page the item is on
var lightboxTop = curPage*winHeight;
document.getElementById("LightBoxDiv").style.top=lightboxTop;

我的lightboxdiv覆盖了整个观看区域，但是如果你想要一个更小的，居中的，你需要添加额外的窗口高度的一半，然后设置上边距为你想要的高度的负量的一半。

例如，如果灯箱是200 × 200，那么你的灯箱顶部将是var lightboxTop = (curpage*winHeight)+(winHeight*.5); var topMargin = "-100px";

它可能需要一些推文，但总的来说，它应该可以确定页码。

相关文章：