javascript 坐标专题 及 window对象

2019独角兽企业重金招聘Python工程师标准>>>

一、javascript方式实现

1、记录js的获取屏幕的宽度和高度

网页可见区域宽： document.body.clientWidth    //你在网页中做看到的宽度
网页可见区域高： document.body.clientHeight   //你在网页中做看到的宽度
网页正文全文宽： document.body.offsetWidth (包括边线的宽)
网页正文全文高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth   //返回全文的宽度（通过滚动条滚动的）
网页正文全文高： document.body.scrollHeight //返回全文的高度（通过滚动条滚动的）

网页被卷去的高： document.body.scrollTop    //滚动条滚的离网页上边框的距离
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop    //网页距离屏幕上边框的距离
网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height   //屏幕的分辨力
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight  //屏幕的可使用区域的高度
屏幕可用工作区宽度： window.screen.availWidth

<script language="javascript">
function screenInfo(){
    var  s = "";
   s += "\r\n网页可见区域宽："+ document.body.clientWidth;
   s += "\r\n网页可见区域高："+ document.body.clientHeight;
   s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
   s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
   s += "\r\n网页正文全文高："+ document.body.scrollHeight;
   s += "\r\n网页被卷去的高："+ document.body.scrollTop;
   s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
   s += "\r\n网页正文部分上："+ window.screenTop;
   s += "\r\n网页正文部分左："+ window.screenLeft;
   s += "\r\n屏幕分辨率的高："+ window.screen.height;
   s += "\r\n屏幕分辨率的宽："+ window.screen.width;
   s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
   s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
   alert(s);
}
</script>

2、获取鼠标的位置
http://www.codebit.cn/javascript/how-to-drag-and-drop-in-javascript.html

通过事件获取鼠标的坐标

event.clientX //相对文档的水平座标
event.clientY //相对文档的垂直座标
event.offsetX //相对容器的水平坐标
event.offsetY //相对容器的垂直坐标

获取鼠标坐标的函数

document.onmousemove = mouseMove;
 
function mouseMove(ev){
	ev = ev || window.event;
	var mousePos = mousePosition(ev);
}
function mousePosition(ev){
    if(ev.pageX || ev.pageY){
        return {x:ev.pageX, y:ev.pageY};
    }
    return {
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:ev.clientY + document.body.scrollTop  - document.body.clientTop
    };
}

     为了让 ev 在所有浏览器下获取了 event 事件，在Firefox下"||window.event"将不起作用，因为ev已经有了赋值。在 IE 中 ev 为空，所以得到 window.event 。
     Firefox 和其他浏览器用 event.pageX 和 event.pageY 来表示鼠标相对于文档的位置，如果你有一个 500*500 的窗口并且你的鼠标在绝对中间，那么 pageX 和 pageY 的值都是 250，如果你向下滚动 500， 那么 pageY 将变成 750。
     MSIE 正好相反，它使用 event.clientX 和 event.clientY 表示鼠标相当于窗口的位置，而不是文档。在同样的例子中，如果你向下滚动500，clientY 依然是 250，因此，我们需要添加 scrollLeft 和 scrollTop 这两个相对于文档的属性。最后，MSIE 中文档并不是从 0，0 开始，而是通常有一个小的边框（通常是 2 象素），边框的大小定义在 document.body.clientLeft 和 clientTop 中，我们也把这些加进去。

二、浏览器相对于屏幕的位置
    IE、Safari、Opera、Chrome提供了screenLeft和screenTop两个属性，而Firefox提供了screenX和screenY的属性。
    取值方法如下：
    

var leftpos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX;
var toppos = (typeof window.screenTop == "number")?window.screenTop:window.screenY;

在firefox和safari中，screenTop保存的是浏览器上端相对于屏幕边界的距离，其他的浏览器会带上浏览器上端的工具栏

moveTo和moveBy能够将浏览器窗口精确地移动到一个新的位置，moveTo接受新位置的坐标x,y，moveBy接收水平和垂直方向上移动的像素数。

window.moveTo(0,0);//将窗口移动到屏幕的左上角
window.moveBy(0,100);//将窗口向下移动100px
window.moveBy(-50,0);//将窗口向左移动50px

三、导航和打开窗口
1、window.open()接收四个参数：要加载的URL、窗口目标、一个特性字符串、新页面是否取代历史页面中当前页面加载的布尔值。最后一个窗口只在不打开新窗口的时候使用。第二个参数就是设置target，然后在这个目标窗口中打开连接，如果没有这个窗口，则会创建一个这样的窗口。

window.open("http://baidu.com","test","height=40,width=400,resizeable=yes");

四、location对象

获取url参数的函数：

适合mvc框架的url
    function getQueryParams(name) {
        var r = new RegExp("(\\?|#|&)" + name + "=([^&#]*)(&|#|$)");
        var m = location.href.match(r);
        if(!m){
            r=new RegExp("(/)" + name + "/([^&#/]*)(/)");
            m=location.href.match(r);
        }
        return decodeURIComponent(!m ? "" : m[2]);
    };

        function getParam(){
            var search = location.search?location.search:"";
            if(search.length>0){
                search = search.substring(search.indexOf("?")+1);
                var arr=search.split('&');
                var params = {};
                for(var i in arr){
                    var param = {};
                    var carr = arr[i].split('=');
                    param["name"]=carr[0];
                    param["value"]=carr[1];
                    params[i]=param;
                }
                return params;
            }
            else{
                return false;
            }
        }

五、history对象
history.go(-1);//后退一页   等同于history.back();
history.go(1);//前进一页    等同于history.forward();
if(history.length==0);  // 确定这是用户打开窗口的第一个页面

转载于:https://my.oschina.net/bugyang/blog/112575