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("显示的提示信息",“默认值(可为空)”);//一个提示框

BOM 之 window,布布扣,bubuko.com

BOM 之 window

上一篇:简单三分钟,本地搭建 k8s


下一篇:linux新API---timerfd的使用方法