zoukankan      html  css  js  c++  java
  • BOM 之 window

    BOM 之 window 对象
    在网页中定义的任何一个对象,变量和函数,都以 window 作为其

    Global 对象,因此有权访问别的方法和属性
        var age = 26;
        function sayAge()
        {
            alert(this.age);
        }

        // alert(window.age); // 26
        // sayAge(); // 26
        window.sayAge(); // 26

    在全局作用域中定义了一个变量 age 和 一个函数 sayAge(),它们被

    自动归在了 window对象名下,于是,可以通过 window.age 访问变量

    age,可以通过 window.sayAge() 访问函数 sayAge(),由于 sayAge()

    存在于全局作用域中,因此 this.age 被映射到了 window.age。很多

    全局 js 对象(如 location,navigator)实际上都是 window 对象的

    属性

    ====================
    窗口关系及框架
    如果页面中包含框架,则每个框架都有自己的 window 对象,并且保

    存在 frames 集合中。在 frames集合中,可以对通过数值索引(从 0

    开始,从左到右,从上到下)或者框架名称来访问相应的 window 对象

    。每个 window 对象都有一个 name 属性,其中包含框架的名称,如:
    <html>
       <head>
         <title>frameset</title>
       </head>
       <frameset rows="*,*">
         <frame src="1.html" name="topFrame" />
         <frameset cols="*,*">
        <frame src="2.html" name="leftFrame" />
        <frame src="3.html" name="rightFrame"  />    
         </frameset>
       </frameset>
    </html>
    可以通过 window.frames[0]或者 window.frames["topFrame"]来引用

    上方的框架。也可以引用 top 而非 widow 来引用这些框架

    (top.frames[0])。top 对象始终指向最高(最外)层的框架,也就

    是浏览器窗口,使用它可以确保在每个框架中正确地访问另一个框架

    ,因为对于在一个框架中编写的任何代码来说,其中的 window对象指

    向的都是那个框架的特定实例,而非最高层框架。与 top 相对的另一

    个 window 对象就是 parent,它始终指向当前框架的直接上层框架。

    在某些情况下, parent 有可能等于 top,但在没有框架时,一定等于

    top,如:
    <html>
       <head>
         <title>frameset</title>
       </head>
       <frameset rows="*,*">
         <frame src="1.html" name="topFrame" />
         <frameset cols="*,*">
        <frame src="2.html" name="leftFrame" />
        <frame src="3.html" name="rightFrame"  />    
         </frameset>
       </frameset>
    </html>
    其中 3.html包含如下代码(含有另一个框架)
    <html>
        <head>
           <title>3.html</title>
        </head>
        <framset cols="*, *">
           <frame src="4.html" name="redFrame" />
           <frame src="5.html" name="blueFrame" />
        </framset>
    </html>
    如果在代码在 redFrame或者 blueFrame中,那么 parent 对象指向的

    就是 rightFrame,如果代码位于 topFrame中,则parent 指向的是

    top ,因为 topFrame 的直接上层框架就是最外层框架。self 也是与

    框架有关的一个对象,它始终指向 window,self与 window可以互换,
    可以将不同层次的 window 对象连缀起来。如:

    window.parent.parent.frames[0]

    ========================
    窗口位置,确定和修改 window 对象位置
    IE,Safari,Opera和Chrome都提供了 screenLeft和screenTop 属性,

    分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则是用

    screenX 和 screenY 提供相同的窗口位置信息,  Safari 和 Chrome

    也同时支持这两个属性,如下代码可以跨浏览器取得窗口左边和上边

    的位置:
        var leftPos = (typeof(window.screenLeft) == "number")

    ? window.screenLeft : window.screenX;

        var topPos = ((typeof(window.screenTop)) == "number")

    ? window.screenTop : window.screenY;

    在 ie,opera,chrome中,screenLeft和screenTop 中保存的是从屏幕

    左边和上边到由 window 对象表示的页面可以区域的距离。这就是说

    ,对象是最外层对象,而且浏览器窗口紧贴屏幕最上端--即 y 轴坐标

    为0,那么 screenTop的值就是位于页面可见区域上方的浏览器工具栏

    的像素高度。但是在 firefox 和 safari中,screenTop中的整个浏览

    器容器相对于屏幕的坐标值,即在窗口的Y轴坐标为0返回0.

    有些浏览器禁用以下方法 X指左边距离,Y指右边距离

    window.moveTo(x,y); // 将窗口移动到指定距离的屏幕距离

    window.moveBy(x,y); 将窗口向下移动指定的像素数
    ===============================================
    窗口大小
    firefox,safari,opera,chrome提供了四个属性

    innerWidth,innerHeight,outerWidth, outerHeight,但是IE不支

    持,chrome中 outerWidth与innerWidth一样,innerHeight与

    outerHeight一样,但是firefox则不同,outerWidth,outerHeight是

    整个窗口,但 innerWidth, innerHeight 是去除边框和上面的工具栏

    之类的,IE可以通过document.documentElement.clientWidth和

    document.documentElement.clientHeight中保存了页面窗口的信息,

    但这是在标准模式中的,在混杂模式则用 document.body.clientWidth

    和 document.body.clientHeight,可以通过如下代码来获取:
        var pageWidth = window.innerWidth;
        var pageHeight = window.innerHeight;

        if((typeof(pageWidth)) != "number")
        {
            if(document.compatMode == "CSS1Compat")
            { // ie 标准模式
                pageWidth =

    document.documentElement.clientWidth;
                pageHeight =

    document.documentElement.clientHeight;
            }else
            { // ie 混杂模式
                pageWidth =

    document.body.clientWidth;
                pageHeight =

    document.body.clientHeight;
            }
        }
    以下方法有可能被禁止
    resizeTo(x,y): 调整为指定宽度为 x , 高度为 y

    resizeBy(x,y): 增加宽度为 x,高度为 y

    ===================================
    导航和打开窗口
    使用 window.open()方法既可以导航到一个特定的 url,也可以打开

    一个新的浏览器窗口。这个方法接受四个参数:要加载的 url,窗口目

    标,一个特性字符串以及一个表示新页面是否取代浏览器历史中当前加

    载页面的布尔值.通常只须传递第一个参数,最后一个只是在不打开新

    的窗口的情况下用.

    // <a href="http://www.cnblogs.com" target="topFrame" />
    等于
    window.open("http://www.cnblogs.com", "topFrame");
    如果指定的框架不在,则创建一个新窗口并且指定命名为

    "topFrame",第二个参数还可以是 _self,_parent,_top,_blank
    第三个参数是一个逗号分隔的设置字符串,表示在新窗口中都显示那

    些特征,如 fullscreen = yes/no;是否最大化,仅IE
    height = number,left=number,width=number 之间不能有空格
    如 var newwin = window.open

    ("http://www.cnblogs.com","_blank","height=300,width=500")
    使用 close()可以关闭用 open打开的亲窗口,但只能关闭open打开的

    窗口
    newwin.close();
    新创建的 window 对象有一个 opener属性,其中保存着打开它的原始

    窗口对象。指向调用 window.open() 的窗口或框架

    ===================
    间歇调用和超时调用
    setTimeout("", time); //在指定的时间执行
    两个参数,第一个可以是字符串(和eval()函数中使用字符串一样),也

    可以是函数

    // 不建议
    setTimeout('alert("hi")', 1000);

    setInterval()接受的参数与 setTimeout()一样,但是是在指定的时

    间重新执行,它们都回返回一个 数值ID
    clearTimeout(timeoutid)/ clearInterval(clearTimeout)
    清除setTimeout()/setInterval(),只要把 setTimeout(),  

    setInterval(),产生的ID作为 clearTimeout的参数即可

    ==================
    系统对话框
    alert()/confirm()/prompt();它们的外观由浏览器和(或)操作系统

    设置决定
    alert("字符串"); // 生成警告对话框。
    confirm("字符串"); // 确认对话框,点击“确定”返回 true,点击"

    取消"或者关闭按钮,则返回 false

    prompt("显示的提示信息",“默认值(可为空)”);//一个提示框

  • 相关阅读:
    VSS2005的使用实例
    JS采集程序编码
    MVC article from java.sum.com
    Unit Test研究报告
    12306.cn火车票自动订票软件
    Cisco 交换机端口故障解决(二)
    cisco 2811 Qos
    双网卡同时上内外网的路由设置
    一个很有用的字符串处理的头文件(在程序的容错中特别有用)
    网络分析软件(科来网络分析软件)
  • 原文地址:https://www.cnblogs.com/lin3615/p/3648281.html
Copyright © 2011-2022 走看看