美文网首页
JavaScript(BOM)之window对象

JavaScript(BOM)之window对象

作者: 择夕_ | 来源:发表于2018-05-14 21:40 被阅读0次

    windwo对象

    1全局作用域

    因为windiow是Global中的一员,所以在全局作用域中声明的变量、函数都可以通过window的方式获取到(用户声明的变量、函数,都是window对象的属性和方法)。

    var age = 29;
    function getAge(){
        alert(this.age);
    }
    
    alert(window.age);      //29
    sayAge();               //29
    windwo.sayAge();        //29
    

    这里要注意:windwo.sayAge(),是通过window直接调用的sayAge()方法

    2窗口关系及框架

    如果页面中包含框架,则每个框架都拥有自己的window对象,兵器保存在frames集合中。在frames几乎中,可以通过数值索引(从0开始,从左到右、从上到下)或者框架名称来访问响应的window对象。对每个window对象都有一个name属性,其中包含框架的名称。
    其实这里说的框架就是frameset。说实话,正常工作中用到这个的地方很少,所以不做详细介绍。

    3窗口位置

    对于博客上常见的screanLeft、screanTop、screanX、screanY支持大部分主流浏览器。但是在Opera中screanLeft、screanTop属性并不对应。screanX、screanY在不同浏览器中返回的数据也是不一样的。所以说夸浏览器时是无法获取精准坐标的。
    使用moveTo()和moveBy()方法可以将窗口精确的移动到一个新的位置:

    //将窗口移动到屏幕左上角
    window.moveTo(0, 0);
    //将窗口乡下移动100px
    window.moveBy(0, 100);
    //将窗口移动到200,300
    window.moveTo(200,300);
    //将窗口向左移动50px
    window.moveBy(-50, 0);
    
    4窗口大小

    跨浏览器获取一个窗口的大小是很困难的。因为innerWidth、innerHeight、outerWidth、outerHeight都不是很兼容。

    var pageWidth = window.innerWidth;
    var pageHeight = window.innerHeight;
    
    if(typeof pageWidth != "number"){
        if(document.comaptMode == "CSS1Compage"){
            pageWidth = documet.documentElement.clientWidth;
            pageHeight = dicument.documentElement.clientWidth;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }
    

    标准模式下documet.documentElement.clientWidth才生效。如果浏览器处于混杂模式document.body.clientWidth是最好的选择。
    resizeTo()和resizeBy()的方式可以调整浏览器窗口的大小。resizeTo()接收浏览器窗口的新宽度和新高度。resizeBy()接受新窗口和原窗口的高度只差。

    //调整到100 * 100
    window.resizeTo(100, 100);
    //调整到200 * 150
    window.resizeBy(100, 50);
    
    5导航和打开窗口

    window.open可以接收以下参数

    key value 说明
    height 数值 新窗口高度,不小于100
    left 数值 新窗口左坐标,不能小于0
    top 数值 新窗口上坐标,不能小于0
    width 数值 新窗口宽度,不能小于100
    location yes或no 是否在浏览器窗口显示地址栏
    menubar yes或no 是否在浏览器窗口显示菜单栏
    resizable yes或no 能否通过拖动浏览器窗口的边框,改变其大小
    scrollbars yes或no 内容展示不下,是否允许滚动
    status yes或no 是否在浏览器窗口显示状态栏
    left yes或no 是否在浏览器窗口显示工具栏
    6间歇调用和超时调用

    JavaScript是单线程语言,但是可以通过设置时间,来控制方法是否执行。

    // 1s后执行该方法
    setTimeout(function(){
        alert("Hello")
    }, 1000);
    
    
    timeoutId =setTimeout(function(){
        alert("Hello")
    }, 1000);
    //通过setTimeout返回的id直接获取到
    clearTimeout(timeoutId)
    //
    

    还有一个比较常用的方法setInterval()

    //每10s执行一次
    setInterval (function(){
        alert("Hell0");
    } ,10000);
    
    7系统对话框

    浏览器通过alert()、confirm()、prompt()调用系统对话框向用户显示信息

    if (confirm("Are you sure?")){
        alert("I'm so glad you're sure!");
    } else{
        alert("No");
    }
    
    var result = prompt("what's your name?","");
    if (result != null){
        alert("Welcome, " + result)
    }
    
    
    //显示“打印”对话框
    window.print();
    //显示“查找”对话框
    window.find();
    

    相关文章

      网友评论

          本文标题:JavaScript(BOM)之window对象

          本文链接:https://www.haomeiwen.com/subject/oxksdftx.html