diy1818

窗口位置

screenLeft和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置(ie,safari,opera,chrome). Firefox则在screenX和screenY属性中提供相同的窗口位置信息,Safari和Chrome也同时 支持这两个属性. 如下:

    var l = (typeof window.screenLeft == 'number') ? window.screenLeft :window.screenX;
    var t = (typeof window.screenTop == 'number') ? window.screenTop : window.screenY;
    console.log(l,t);

因为相对于屏幕边界的精确坐标不同,screenLeft和screenTop在各浏览器中取得的窗口左边上上边的值都不相同. 然而,使用moveTo()和moveBy()方法,可以将窗口精确的透支到一个新位置上,这两个方法 都 接收两个参数 ,
moveTO()接收的是新位置的x和y坐标值,而moveBy()接收的是在水平各垂直向上移动的像素数. 如下:(高版本浏览器会默认禁止这个方法,只能对最外层的window对象使用)

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

窗口大小

跨浏览器确定一个窗口的大小不是一件简单的事,ie9+,f,s,o,c都为此提供了4个属性: innerWidth,innerHeight,outerWidth,outerHeight. 在ie9+,s,f中,outerWidth和outerHeight返回浏览器窗口本身的尺寸. 在o中,这两个属性的值 表示页面视图容器(指o中单个标签面对应的浏览窗口)的大小. innerHeight,innerWidth 表示该容器中页面视图区的大小 (减去边框宽度). 在C中,outerHiehgt,outerWidth与innerwidth,innerHegith返回相同的值, 即视口(viewport)大小而非浏览器窗口大小.

    var pw = window.innerWidth,
       ph = window.innerHeight;
    console.log(pw,ph);
    if(pw != 'number'){
        if(document.compatMode == 'CSS1Compat'){//是否是标准模式
            pw = document.documentElement.clientWidth;
            ph = document.documentElement.clientHeight;
        }else{
            pw = document.body.clientWidth;
            ph = document.body.clientHeight;
        }
    }

导航和打开窗口

使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口, 这个方法可以接收4个参数:要加载的URL,窗口目标,一个特性字符串,一个表示 新页面是否取代 浏览器历史记录中当前加载页面的布尔值. 通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用.

    //等同于<a href="www.diy1818.com" target = 'topF'></a>
    window.open('www.diy1818.com','topF');

    var w = window.open('http://www.diy1818.com','test','height=300,width=300,top=10,left=10,resizable=yes');
   //调整大小
   w.resizeTo(400,400);
   //移动位置
   w.moveTo(100,100);

新创建的window对象有一个opener属性,其中保存着打开它的原始窗口对象.将opener 属性设置为null,就是告诉浏览器新创建的标签页不需要与打开它的标签页通信, 因此可以独立在进程中运行.标签页之间的联系一旦切断,将没有办法恢复.

间歇调用和超时调用

超时调用 需要使用 window对象的setTimeout()方法,它接收两个参数: 要执行的代码 和以毫秒表示的时间(即在执行代码前需要等待多少毫秒). 第一个参数可以是字符串也可以是函数,但建议使用函数,如下

    //设置超时调用
  var timeoutId =  setTimeout(function(){
        console.log('hello');
    },1000)

    //取消
    clearTimeout(timeoutId);

超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向 window对象,在严格模式下是undefined.

间歇调用会按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载. 其方法是setInterval(),如下:

     var num = 0;
    var max = 10;
    var intervalId = null;
    function incrementNumber(){
        num++;
        console.log(num);
        //如果执行次数达到了max设定的值,则取消后续尚未执行的调用
        if(num == max){
            clearInterval(intervalId);
            alert('done');
        }

    }

    intervalId = setInterval(incrementNumber,500);

上面代码每半秒递增一次,当递增到最大值 就会取消先前设定的间歇调用. 也可以用超时调用 来实现,如下

    var num = 0;
    var max = 10;
    function incrementNumber(){
        num++;
        console.log(num);
        //如果执行次数未到达max设定的值,则设置另一次超时调用
        if(num < max){
            setTimeout(incrementNumber,500);
        }else{
            alert('done');
        }
    }
    setTimeout(incrementNumber,500);

在超时调用中,不用跟踪调用 Id,一般认为,使用超时调用来模拟间歇调用是一种最佳模式.

location对象

location对象即是window对象的属性,也是document对象的属性,window.location和 document.location引用的是同一个对象. location对象的用处不只表现在它保存着的当前 文件的信息,还表现在它将URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段.

</table>

属性名	例子	说明
location.hash	"#con"	返回URL中hash(#号后跟零或多个字符),如果URL中不包含散列,则返回空字符串
location.host	"www.diy1818.com:80"	返回服务器名称和端口号(如果有)
location.hostname	'www.diy1818.com'	返回不带端口号的服务器名称
location.href	'http://ww.diy1818.com'	返回当前加载页面的完整URL.而location对象的toString()方法也返回这个值
location.pathname	'/bild/'	返回URL中的目录和(或)文件名
location.port	'8080'	返回URL中指定的端口号,没有为空
location.protocol	'http:'	返回页面使用的协议
location.search	'?q=js&name=c'	返回URL的查询字符串,这个字符串以问号开头