即使页面布局发生变化,如何确保保存的点击坐标可以重新播放到同一位置？

Question

我在我的数据库中存储点击坐标,然后稍后重新加载它们并在点击发生的网站上显示它们,我如何确保它在同一个地方加载？

存储点击坐标显然是一个简单的步骤,但是一旦我有了它们,如果用户回来并且他们的窗口更小或更大,则坐标是错误的.我是否以错误的方式解决这个问题,我是否还应该存储元素id/dom引用或者那种性质的东西.

此外,此脚本将在具有多个布局的许多不同网站上运行.有没有办法在布局与坐标存储方式无关的情况下执行此操作？

Answer 1

是的,页面的布局可以在许多方式之间改变很多种方式.不同的窗口大小,不同的字体大小,不同的字体可用性,不同的浏览器/设置(即使布局或字体偏好的小变化都可以抛弃包装).除非您的页面几乎完全是固定大小的图像,否则存储页面相对坐标不太可能有用.

您可以尝试查找单击元素的祖先以查找最近的易于识别的元素,然后根据该子元素编号从该元素到您想要的元素.

使用简单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/

Answer 2

我不喜欢使用id选择器而只是递归.

function getPathTo(element) {
    if (element.tagName == 'HTML')
        return '/HTML[1]';
    if (element===document.body)
        return '/HTML[1]/BODY[1]';

    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++;
    }
}

Answer 3

您的坐标应该相对于页面内容，而不是窗口。使用 HTML 的左上角作为原点。

您需要在记录数据时进行计算以确定这一点。