我将点击坐标存储在我的数据库中,稍后重新加载它们并在发生点击的网站上显示它们,我如何确保它加载在同一个地方?
存储点击坐标显然是简单的步骤,但是一旦我有了它们,如果用户回来并且他们的窗口变小或变大,则坐标是错误的。我是否以错误的方式解决这个问题,我是否还应该存储元素 id/dom 引用或类似性质的东西。
此外,此脚本将在具有不止一种布局的许多不同网站上运行。有没有办法在布局独立于坐标存储方式的情况下执行此操作?
最佳答案
是的,页面布局可以通过多种方式在加载之间进行更改。不同的窗口大小、不同的字体大小、不同的字体可用性、不同的浏览器/设置(即使是布局或字体首选项的微小变化也可能导致换行)。除非您的页面几乎完全是固定大小的图像,否则存储页面相对坐标不太可能有用。
您可以尝试查找被单击元素的祖先以找到最近的易于识别的元素,然后根据它的子编号从该元素向下绘制到您想要的元素。
使用简单 XPath 的示例语法:
document.onclick= function(event) {
if (event===undefined) event= window.event; // IE hack
var target= 'target' in event? event.target : event.srcElement; // another IE hack
var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
var mxy= [event.clientX+root.scrollLeft, event.clientY+root.scrollTop];
var path= getPathTo(target);
var txy= getPageXY(target);
alert('Clicked element '+path+' offset '+(mxy[0]-txy[0])+', '+(mxy[1]-txy[1]));
}
function getPathTo(element) {
if (element.id!=='')
return 'id("'+element.id+'")';
if (element===document.body)
return element.tagName;
var ix= 0;
var siblings= element.parentNode.childNodes;
for (var i= 0; i<siblings.length; i++) {
var sibling= siblings[i];
if (sibling===element)
return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
if (sibling.nodeType===1 && sibling.tagName===element.tagName)
ix++;
}
}
function getPageXY(element) {
var x= 0, y= 0;
while (element) {
x+= element.offsetLeft;
y+= element.offsetTop;
element= element.offsetParent;
}
return [x, y];
}
您可以使用这个 JSFiddle 查看它的运行情况:http://jsfiddle.net/luisperezphd/L8pXL/
关于javascript - 如何确保保存的点击坐标可以重新加载到同一个地方,即使页面布局发生变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2631820/