如何使用Javascript在浏览器中按X-Y坐标定位?

时间:2020-03-05 18:54:44  来源:igfitidea点击:

我正在尝试这样做,以便当用户向下滚动页面,单击链接,执行他们需要做的所有事情,然后返回带有链接的页面时,它们位于相同的(xy)位置他们以前的浏览器。我怎么做?

我是DOM新手,所以我对此不太了解。

目标浏览器:IE6 / 7/8,Firefox 2/3,Opera,Safari

补充:我正在使用一个名为JQuery的程序来帮助我学习

解决方案

回答

我们可以使用offsetLeft和offsetTop

回答

试试这个或者这个。

回答

据我所记得,获取视口位置的代码在浏览器之间是不同的,因此使用某种框架会更容易,例如Prototype具有函数document.viewport.getScrollOffsets(我相信这是你在追求)。

但是,获取坐标只是一部分,另一部分稍后将对其进行处理。在这种情况下,我们可以将事件侦听器添加到window.unload事件,当该事件触发时,将位置保存在cookie中,然后在用户再次打开页面时,检查该cookie是否存在并相应地滚动。

尽管我们所关心的只是通过浏览器的"后退"按钮将用户带回到他回到页面时的位置,但是大多数浏览器不是已经自动这样做了吗?

回答

通常,如果我们先浏览然后返回(在我们喜欢的新闻站点上的任何页面上尝试),浏览器都会保留页面视口。唯一的例外可能是如果我们调整缓存设置以每次都重新下载并重新呈现页面。

不这样做(也就是说,不将页面设置为永不缓存)可能是解决问题的最简单,最不麻烦的方法。

回答

要获取用户单击页面的位置的x-y位置,请使用以下jQuery代码:

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                $("#special").click(function(e){
                    $('#status2').html(e.pageX +', '+ e.pageY);
                }); 
            });
        </script>
    </head>
    <body>
        <h2 id="status2">
            0, 0
        </h2>
        <div style="width: 100px; height: 100px; background:#ccc;" id="special">
            Click me anywhere!
        </div>
    </body>
</html>