美文网首页
1. window 对象

1. window 对象

作者: 唐唐_sugar | 来源:发表于2016-09-19 16:39 被阅读0次

    BOM的核心对象是window,表示浏览器的一个实例

    1.全局作用域

    window对象同时扮演ECMAScript中Global对象的角色,故所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

    比较:定义全局变量在window对象上直接定义属性的区别

    • 全局变量不能通过delete操作符删除
    • 直接在window对象上定义的属性可以
    var age = 11;
    window.wAge = 22;
    
    //以下两个delete操作在IE<9时均抛出错误
    delete window.age;  //false  全局变量不能删
    delete window.wAge;  //true  直接在window对象上定义的属性可以删
    
    console.log(window.age);    //11  未被删掉
    console.log(window.wAge);   //undefined  已删除
    
    

    2.窗口关系及框架

    若页面中包含框架,则每个框架都有自己的window对象,且保存在frames集合中,通过索引或框架名称来访问相应的window对象。

    3.窗口位置

    跨浏览器取得窗口左边和上边的位置

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

    此外,moveTo()moveBy()方法也可将窗口精确移动到新位置

    但这两种方法可能会被浏览器禁用,且不适合框架,只能对最外层的window对象使用。

    4.窗口大小

    • innerWidth
    • innerHeight
    • outerWidth
    • outerHeight

    但由于各浏览器的规定不同,无法确定浏览器窗口本身的大小。但可通过以下代码取得页面视口大小:

    var pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;
    
    if (typeof pageEidth != "number") {
        if (document.compatMode == "CSS1Compat") {      //确定页面是否处于标准模式
            pageWidth = document.documentElement.clientEidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }
    
    

    5.导航和打开窗口——window.open()

    使用window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。本方法接收4个参数:

    1. 要加载的UTL —— (通常只传递第一个参数)
    2. 窗口目标
    3. 一个特性字符串
    4. 一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值 —— (通常只在不打开新窗口的情况下使用)

    5.1 弹出窗口

    如果传递的第二个参数并不是一个已经存在的窗口或框架,该方法就会根据第三个参数所传的字符串创建一个新窗口或新标签页(若第三个参数未传值,则打开默认设置的新窗口)

    • opener属性
      新建window对象有一个opener属性,保存着打开它的原始窗口对象。将新创建的标签页的opener属性设置为null,即表示在单独的进程中运行新标签页

    5.2 安全限制

    5.3 弹出窗口屏蔽程序

    6. 间歇调用和超时调用

    超时调用:window对象的setTimeout()方法,接收两个参数
    1. 要执行的代码——不建议使用字符串,建议使用函数
    2. 以毫秒表示的时间
    //设置超时调用
    var timeoutId = setTimeout(function(){
        alert("Hello world")
    },1000)
    //把它取消
    clearTimeout(timeoutId);
    
    间歇调用:window对象的setInterval()方法,接收两个参数,类似于setTimeout()

    开发环境中很少使用间歇调用,一般使用超时调用来模拟间歇调用。

    7. 系统对话框

    • alert() 只有“确认”按钮
    • confirm() 有“确认”和“取消”两个按钮
    • prompt() “提示”框——用于提示用户输入一些文本。显示“确认”和“取消”两个按钮。接收两个参数:
      • 要显示给用户的文本提示
      • 文本输入域的默认值(可以是空字符串)

    相关文章

      网友评论

          本文标题:1. window 对象

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