bom的总结1:window对象

window对象

window对象是浏览器的一个实例,有双重角色:既是Javascript访问浏览器窗口的接口,又是ECMAScript的Global对象。

1.window对象的全局作用域

    在外部定义的对象,函数,属性都会成为window对象的属性
    var age = 20;
    console.log(window.age);
    function sayAge() {
        console.log('打印年龄:'+window.age);
    }
    window.sayAge();
    1.1 与直接添加在window的属性函数等等的区别是,它们不能通过delete删除
    console.log(delete(age));//非严格模式下返回false
    window.height = 180;
    console.log(delete(window.height));//返回true
    console.log(window.age);//一样存在
    console.log(window.height);//已被删除
    > 注意：ie8及以前使用delete删除window的属性的时候,都会抛出错误以示警告

2.窗口关系及框架

这部分日后再补充，可参考Javascript高级程序设计第三版P194

3.窗口位置

    var leftPos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX;
    var topPos = (typeof window.screenTop == "number")?window.screenTop:window.screenY;
    alert('距离左边:'+leftPos + '距离上边:'+topPos);
    有一些小问题,暂且忽略
    >注意:window.moveTo和window.moveBy方法一般都会被浏览器屏蔽掉.

4.窗口大小

      //获取窗口大小存在各种问题:如chrome获取到的是视口大小,如IE8及更早获取不到等等
      console.log('窗口大小:'+ window.outerWidth + '和' + window.outerHeight);
      //获取视口大小:
      var pageWidth = window.innerWidth,pageHeight = window.innerHeight;
      if (typeof pageWidth != "number"){
        if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
      }

5.导航和打开窗口

    //打开窗口:没有则新建.参数说明:1:要打开的url,
    // 2.窗口目标,特殊的窗口名称:_blank,_self,_parent,_top
    // 3.一个特性字符串,
    // 4.一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
    var otherWindow = window.open('http://piaoshu.org','otherWindow','height=400,width=400,left=100,top=100');
    console.log(otherWindow.opener);
    console.log(otherWindow.opener === window);//打印true
    otherWindow.resizeTo(600,600);
    console.log(otherWindow.closed);//打印false
    otherWindow.close();
    console.log(otherWindow.closed);//打印true
    //通常只指定第一个参数,等同于<a href="http://baidu.com" target='_blank'></a>
    window.open('http://baidu.com');
    //大多数浏览器都内置有弹出窗口屏蔽程序，或者装有相关工具
    //所以可以判断窗口是否被屏蔽
    var blocked = false;
    try {
        var wroxWin = window.open("http://www.wrox.com", "_blank");
        if (wroxWin == null){
            blocked = true;
        }
    } catch (ex){
        blocked = true;
    }
    if (blocked){
        alert('打开新窗口被屏蔽了,请开启');
    }

6.超时调用和间歇调用

    //超时调用注意:设定时间值到了不一定会立刻执行,因为js是单线程的解析器,所以一定时间内只能执行一段代码
    //如果时间到了,js任务队列是空的,就会立刻执行,否则就等待执行.
    var timeId = setTimeout(function () {
        console.log('超时调用');
    },1000);
    clearTimeout(timeId);//在执行之前调用就可以取消了
    //间歇调用注意:需要在特定条件下取消间歇调用,否则会一直在重复调用,直至页面卸载
    var count = 60, interval = null;
    var logFun = function () {
        console.log('每一秒调用一次我');
        console.log(count);
        count -= 1;
        if(count <= 50){
            clearInterval(interval);
        }
    };
    interval = setInterval(logFun,1000);
    //所以为了避免管理间歇调用的取消,,而且,后一个间歇调用可能会在前一个间歇调用结束之前启动(根据设定的间隔时间和代码执行时间来定),经常会使用超时调用来替代间歇调用:
    var num = 0,max = 10;
    var numFun = function () {
        console.log(num);
        num ++;
        //只要符合条件就继续超时调用,相当于间歇调用了
        if(num <= max){
            setTimeout(numFun,1000);
        }
    };
    setTimeout(numFun,1000);

7.系统对话框

    //系统对话框:代码会先停止执行,等对话框消失之后继续执行
    //1.alert:消息提醒
    alert('这是alert消息');
    //2.confirm:确认框,返回值true点击了确定,反之不是
    if(confirm('是否确定删除该邮件')){
        alert('点击确定');
    }else{
        alert('没有点击确定');
    }
    //3.prompt提示用户输入文本
    var result = prompt('请输入你的姓名','姓名');
    if(result != null){
        console.log('这里');
    }