Javascript 当用户停止读取时获取点
用户A进入我的在线杂志。她开始读一篇很长的文章，然后在中间，她决定停顿。她关闭浏览器，几个小时后才回到网站。现在，当她再次打开同一篇文章时，我希望页面从她留下的地方开始 成像用户A实际上是注册用户，我如何实现这一点？更具体地说，我想存储屏幕上第一个可见行的第一个字符的字符号（作为int）（基本上是左上角） 编辑：为了进一步澄清，你可以认为像Instapaper或Pocket这样的应用程序也面临类似的问题（移动和网络应用）。更新答案 我真的不知道如何才能做到这一点。我建议使用Javascript 当用户停止读取时获取点,javascript,Javascript,用户A进入我的在线杂志。她开始读一篇很长的文章，然后在中间，她决定停顿。她关闭浏览器，几个小时后才回到网站。现在，当她再次打开同一篇文章时，我希望页面从她留下的地方开始 成像用户A实际上是注册用户，我如何实现这一点？更具体地说，我想存储屏幕上第一个可见行的第一个字符的字符号（作为int）（基本上是左上角） 编辑：为了进一步澄清，你可以认为像Instapaper或Pocket这样的应用程序也面临类似的问题（移动和网络应用）。更新答案 我真的不知道如何才能做到这一点。我建议使用localStorag
localStoragewidth*scrollTopif oldWidth == currentWidth
set scroll = oldScroll
else
set scroll = oldScroll * oldWidth / currentWidth
不允许在代码段上使用，因此当前代码在此不起作用，如果要进行测试，则必须将其复制到其他位置localStorage
方法的末尾有一个leavePage（）
语句，这是因为有些浏览器在returnnullbeforeuload
if（document.readyState==“complete”）enterPage（）；
否则，添加EventListener（“加载”，输入页面）；
addEventListener（“卸载前”，离开页面）；
函数enterPage（）{
var magazineDom=document.querySelector（“杂志”）；
if（HtmleElement的magazineDom实例）{
magazineDom.textContent=“Lorem Ipsum”。重复（800）；
//onRender（）；
}
}
函数onRender（）{
var magazineContainerDom=document.querySelector（“杂志容器”）；
var magazineDom=document.querySelector（“杂志”）；
if（HtmleElement的magazineContainerDom实例和HtmleElement的magazineDom实例）{
var info=getMagazineInfo（magazineDom.getAttribute（“杂志”）；
如果（信息）{
var currentWidth=magazineDom.scrollWidth；
如果（currentWidth==info.width）magazineContainerDom.scrollTop=info.top；
else magazineContainerDom.scrollTop=info.top*info.width/currentWidth；
}
}
}
函数levePage（）{
var magazineContainerDom=document.querySelector（“杂志容器”）；
var magazineDom=document.querySelector（“杂志”）；
if（HtmleElement的magazineContainerDom实例和HtmleElement的magazineDom实例）{
setMagazineInfo（magazineDom.getAttribute（“杂志”）、magazineContainerDom.scrollTop、magazineDom.scrollWidth）；
}
返回null；
}
函数getMagazineInfo（名称）{
返回JSON.parse（localStorage.magazies | |“{}”）[name]；
}
函数setMagazineInfo（名称、顶部、宽度）{
var magages=JSON.parse（localStorage.magages | |“{}”）；
杂志[名称]={
顶:顶,，
宽度：宽度
};
localStorage.magages=JSON.stringify（杂志）；
}正文{
位置：固定；
底部：0；
右：0；
左：0；
排名：0；
}
#弹匣容器{
溢出y：自动；
身高：100%；
宽度：100%；
}
#杂志{
最大宽度：500px；
保证金：自动；
}我从中得到了一些乐趣。脚本正在创建一个行数组。可以在数组中搜索存储在Cookie中或更好的本地存储中的术语 看 希望你能在下面找到一些解决问题的方法。请不要介意，这只是一些肮脏的剧本
<html>
<body>
<div id="containerWrapper"></div>
<div id="testWrapper"></div>
<div id="originDiv" style="background:#fee;">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa
<strong>strong</strong>. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede <a class="external ext" href="#">link</a>
mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.
<br /><br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa
<strong>strong</strong>. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede <a class="external ext" href="#">link</a>
mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.
</div>
</body>
<script>
(function init() {
var i;
var originDiv = document.getElementById("originDiv");
var allowedWidth = originDiv.scrollWidth;
function testBreak(testDiv, strTest) {
testDiv.innerHTML = strTest + "..."; // Yepp, that's the point. No clue, how to fix this.
return testDiv.scrollWidth > allowedWidth;
}
function tokenizeText() {
return originDiv.innerHTML.trim()
.split(/([\s]*<[a-zA-Z]+.*>.*<\/.*>[.,;:-]*[\s]*)|[\s]+/ig)
.filter(function(a){return typeof(a) != 'undefined'})
.map(function(a){return a.trim()});
}
function createLineArray() {
var testDiv = originDiv.cloneNode(true);
testDiv.innerHTML = "";
testDiv.setAttribute("style", "white-space:nowrap;background:#ccc;visibility:hidden;");
document.getElementById("testWrapper").appendChild(testDiv);
var htmlWords = tokenizeText();
var lines = [];
var currLine = '';
for(i = 0; i < htmlWords.length; i++) {
currLine += htmlWords[i] + ' ';
if(testBreak(testDiv, currLine)) {
lines.push(currLine.substr(0, currLine.length - htmlWords[i].length - 1));
currLine = '';
i--;
}
}
lines.push(currLine);
return lines;
}
function createNewDiv(html) {
var newDiv = document.createElement("DIV");
newDiv.setAttribute("style", "background:#ddf");
newDiv.setAttribute("id", "newContainer");
newDiv.innerHTML = html;
return newDiv;
}
(function doInit() {
var lines = createLineArray();
var formattedText = '';
for (i = 0; i < lines.length; i++) {
formattedText += '<div class="line'+i+'">' + lines[i] + '</div>';
}
document.getElementById("containerWrapper").appendChild(createNewDiv(formattedText));
// originDiv.style.display="none";
})();
(function findLine4(str) {
//TODO: tokenize str and search for matching tokens.
var nodes = document.getElementById("newContainer").childNodes;
for(i = 0; i < nodes.length; i++) {
if(nodes[i].textContent.indexOf(str) != -1) {
setTimeout(function() {
window.scrollTo(0, nodes[i].offsetTop);
},1);
break;
}
}
})("elementum semper");
/*
I personally would prefer a timer instead of a listener here.
*/
window.addEventListener("scroll", function(evt) {
var sct = window.scrollY;
var nodes = document.getElementById("newContainer").childNodes;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].offsetTop > sct) {
console.log("line " + i + ": " + nodes[i].innerHTML);
break;
}
}
}, true);
})();
</script>
</html>
Lorem ipsum dolor sit amet，Concertetuer Adipising
精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨
strong。佩纳提布自然社会酒店
艾特·马格纳斯产妇蒙特斯，纳塞图尔·里迪库斯
马斯。Donec quam felis、ultricies nec、Pelletsque
欧盟、pretium quis、sem。马萨奎斯会议中心
埃尼姆。Donec pede justo、fringilla vel、aliquet nec、，
阿库。在enim justo，rhoncus ut，
维尼那提斯维塔，胡斯托。无主语
猫科动物
莫利斯·普雷蒂姆。整数tincidunt。克拉斯·达皮布斯。
万岁。埃尼安秃鹫
埃利芬德特勒斯。埃尼安·利奥·利古拉，
康塞奎特·维塔、埃利芬德·ac、埃尼姆。Aliquam lorem ante，
达比布斯，维韦拉·奎斯，费吉亚·a，泰勒斯。Phasellus
viverra nulla ut metus varius laoreet。奎斯克·鲁特罗姆。
埃涅亚饮食。奥古斯一世。
乌兰科乌尔里西斯库拉比图尔酒店。
Lorem ipsum dolor sit amet，Concertetuer Adipising
精英。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨
strong。佩纳提布自然社会酒店
艾特·马格纳斯产妇蒙特斯，纳塞图尔·里迪库斯
马斯。Donec quam felis、ultricies nec、Pelletsque
欧盟、pretium quis、sem。马萨奎斯会议中心
埃尼姆。Donec pede justo、fringilla vel、aliquet nec、，
阿库。在enim justo，rhoncus ut，
维尼那提斯维塔，胡斯托。无主语
猫科动物
莫利斯·普雷蒂姆。整数tincidunt。克拉斯·达皮布斯。
万岁。埃尼安秃鹫
埃利芬德特勒斯。埃尼安·利奥·利古拉，
康塞奎特·维塔、埃利芬德·ac、埃尼姆。Aliquam lorem ante，
达比布斯，维韦拉·奎斯，费吉亚·a，泰勒斯。Phasellus
viverra nulla ut metus varius laoreet。奎斯克·鲁特罗姆。
埃涅亚饮食。奥古斯一世。
乌兰科乌尔里西斯库拉比图尔酒店。
（函数init（）{
var i；
var originDiv=document.getElementById（“originDiv”）；
var allowedWidth=originDiv.scrollWidth；
函数测试中断（tes）
<html>
<body>
<div id="containerWrapper"></div>
<div id="testWrapper"></div>
<div id="originDiv" style="background:#fee;">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa
<strong>strong</strong>. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede <a class="external ext" href="#">link</a>
mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.
<br /><br /><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa
<strong>strong</strong>. Cum sociis natoque penatibus
et magnis dis parturient montes, nascetur ridiculus
mus. Donec quam felis, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis
enim. Donec pede justo, fringilla vel, aliquet nec,
vulputate eget, arcu. In enim justo, rhoncus ut,
imperdiet a, venenatis vitae, justo. Nullam dictum
felis eu pede <a class="external ext" href="#">link</a>
mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate
eleifend tellus. Aenean leo ligula, porttitor eu,
consequat vitae, eleifend ac, enim. Aliquam lorem ante,
dapibus in, viverra quis, feugiat a, tellus. Phasellus
viverra nulla ut metus varius laoreet. Quisque rutrum.
Aenean imperdiet. Etiam ultricies nisi vel augue.
Curabitur ullamcorper ultricies nisi.
</div>
</body>
<script>
(function init() {
var i;
var originDiv = document.getElementById("originDiv");
var allowedWidth = originDiv.scrollWidth;
function testBreak(testDiv, strTest) {
testDiv.innerHTML = strTest + "..."; // Yepp, that's the point. No clue, how to fix this.
return testDiv.scrollWidth > allowedWidth;
}
function tokenizeText() {
return originDiv.innerHTML.trim()
.split(/([\s]*<[a-zA-Z]+.*>.*<\/.*>[.,;:-]*[\s]*)|[\s]+/ig)
.filter(function(a){return typeof(a) != 'undefined'})
.map(function(a){return a.trim()});
}
function createLineArray() {
var testDiv = originDiv.cloneNode(true);
testDiv.innerHTML = "";
testDiv.setAttribute("style", "white-space:nowrap;background:#ccc;visibility:hidden;");
document.getElementById("testWrapper").appendChild(testDiv);
var htmlWords = tokenizeText();
var lines = [];
var currLine = '';
for(i = 0; i < htmlWords.length; i++) {
currLine += htmlWords[i] + ' ';
if(testBreak(testDiv, currLine)) {
lines.push(currLine.substr(0, currLine.length - htmlWords[i].length - 1));
currLine = '';
i--;
}
}
lines.push(currLine);
return lines;
}
function createNewDiv(html) {
var newDiv = document.createElement("DIV");
newDiv.setAttribute("style", "background:#ddf");
newDiv.setAttribute("id", "newContainer");
newDiv.innerHTML = html;
return newDiv;
}
(function doInit() {
var lines = createLineArray();
var formattedText = '';
for (i = 0; i < lines.length; i++) {
formattedText += '<div class="line'+i+'">' + lines[i] + '</div>';
}
document.getElementById("containerWrapper").appendChild(createNewDiv(formattedText));
// originDiv.style.display="none";
})();
(function findLine4(str) {
//TODO: tokenize str and search for matching tokens.
var nodes = document.getElementById("newContainer").childNodes;
for(i = 0; i < nodes.length; i++) {
if(nodes[i].textContent.indexOf(str) != -1) {
setTimeout(function() {
window.scrollTo(0, nodes[i].offsetTop);
},1);
break;
}
}
})("elementum semper");
/*
I personally would prefer a timer instead of a listener here.
*/
window.addEventListener("scroll", function(evt) {
var sct = window.scrollY;
var nodes = document.getElementById("newContainer").childNodes;
for(var i = 0; i < nodes.length; i++) {
if(nodes[i].offsetTop > sct) {
console.log("line " + i + ": " + nodes[i].innerHTML);
break;
}
}
}, true);
})();
</script>
</html>
<div id="text_div"></div>
#text_div {
color: #ffffff;
width: 400px;
height: 250px;
overflow:hidden;
background-color: #000000;
}
var scroll_speed = 100 // how many characters to move per scroll
var last_scroll_position = localStorage.scroll_position || 0; // get previous position if any
var the_text =
"Lorem ipsum dolor sit amet, pellentesque libero metus quis sed et vestibulum, ut eget, turpis sed consequat, possimus quis, mi nec leo at wisi interdum posuere. Eu dui vitae, quis habitasse arcu arcu neque, odio enim.<br><br>Amet luctus lectus morbi massa nec, metus cras in molestie dolor, congue sodales viverra odio libero neque. Egestas vulputate vitae libero sodales, pharetra nec ligula vitae, tellus viverra ac vel, amet in sit eget.<br><br>Sit morbi tortor dictum viverra, massa molestie est urna suscipit felis massa, mi dictumst magna blandit, fringilla ut arcu nam urna ut in, et eget mauris metus integer ante.<br><br>Natoque egestas donec, ligula nam sit, ipsum a id, pellentesque in, commodo est eu phasellus sem et. Ut leo elit bibendum, posuere cras et nec, fames in wisi porta ac eleifend. Odio iaculis arcu, dapibus eget in imperdiet, dolor eleifend bibendum eget wisi quis, ultrices metus et lacinia integer. At pellentesque quam sapien, duis faucibus nisl eu dapibus, amet venenatis dictumst quis dictum.<br><br>Adipiscing gravida, massa mi ac, suscipit porta consequat pretium lobortis lacus, nullam facilisis ac gravida habitant, sed faucibus et at porta aliquet.";
document.getElementById("text_div").innerHTML = the_text.substring(localStorage.start_position || 0); // set text to previous position or to 0 (very beginning)
window.addEventListener("wheel", function(e) {
if (e.deltaY < 0 && last_scroll_position > 0) { // move text upwards, unless already at the very beginning
last_scroll_position--;
}
if (e.deltaY > 0 && last_scroll_position * scroll_speed < the_text.length ) { // move text downwards, unless reached end of text
last_scroll_position++;
}
var text_start = last_scroll_position * scroll_speed; // speed up scrolling
if (text_start != 0) { // unless the position is at the beginning, look for the first upcoming space (or the end of text) to show only entire words
while (
the_text.length > text_start &&
the_text.charAt(text_start) != " "
) {
text_start++;
}
}
document.getElementById("text_div").innerHTML = the_text.substring(text_start); // set text according to position
localStorage.scroll_position = last_scroll_position; // store scrolling position
localStorage.start_position = text_start; // store starting character position
});
{
"1234567": { progress: 0.5, date: 1529733009679 }
}