我在我的分贝存储点击坐标,然后重新加载它们,并在点击发生的网站上显示它们,我如何确保它加载在同一个地方?
基本上就是这样。 存储点击坐标显然是一个简单的步骤,但是如果用户返回并且他们的窗口较小或较大,坐标就会出错。 我是否以错误的方式处理这个问题,是否也应该存储一个元素id / dom引用或者这个类的东西。
而且,这个脚本将在多个不同的网站上运行,并且有多个布局。 有没有办法做到这一点布局是独立的如何坐标存储?
谢谢。
是的,页面的布局可以在多个负载之间进行切换。 不同的窗口大小,不同的字体大小,不同的字体可用性,不同的浏览器/设置(即使在布局或字体偏好的小改变可以扔掉包装)。 除非您的页面几乎完全是固定大小的图像,否则存储页面相关的坐标不太可能是有用的。
您可以尝试查找被点击的元素的祖先,以find最近的可以识别的元素,然后根据该元素根据哪个子元素编号从该元素到您想要的元素进行绘图。
使用简单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/
我不喜欢使用idselect器,只是recursion。
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++; } }
这可能取决于点击的意义。 也就是说,你是否关心用户点击哪个页面的元素? 如果是这样的话,我会存储相对于元素的坐标。
所以用户点击元素X.你是否需要元素X的精确位置? 然后将该坐标与元素本身左上angular的原点一起存储。 这样,当元素相对于页面上的其他内容移动时,元素内的位置保持有效。
你的坐标应该是相对于页面内容而不是窗口。 使用HTML的左上angular作为原点。
您将需要做一个计算,以确定在数据logging时。
我希望有人对这个问题有了更为精辟的解决scheme,但是我原来的想法一定是有效做到这一点的唯一方法。
- 每个网站必须具有一个基本设置(例如[中心布局,960px]或[stream体布局,Col1:25%,Col2:60%,Col3:15%]
- 点击坐标必须相对于屏幕logging:x / scroll:y以及屏幕坐标。
- 在返回时,点击坐标将查看存储的布局,当前屏幕大小并基于此计算。