JavaScript中的window对象属性方法全集

我们知道每个浏览器有它自己的标准，比如有些兼容ES6，有些不兼容，可是我们web程序是在浏览器上运行的，如何才能访问到浏览器的属性和功能？每个浏览器都有它自己的标准，浴室把共有的对象就成为标准，这就是JavaScript中BOM的核心。W3C把浏览器中JavaScript最基本的部分标准化。以下来看看window对象中有那些共有的标准化属性。

文章图片
【1】全局作用域【JavaScript中的window对象属性方法全集】其实window这个关键字是有双重身份的，在浏览器中，表示一个窗口；在JavaScript中，它是全局作用域Global的属性。在下面的例子中，定义的是全局变量时，是数据window的属性，所以可以用window访问，如果不是则不能用window访问。那是不是这样定义的全局标量都是window属性？其实不是，全局标量就是全局变量，并不是window属性，只是可以用window访问到而已，还是有差别的，比如在一些老版本的浏览器中，就不能用delete操作符删除全局标量，是可以delete掉window属性的。另外，可以用window来查询是否有window属性，而全局变量则不能这样检查。
例如：

var name = "小新"; function getAge(){ console.log("2"); var old = 52; } window.age = 12; //直接在window定义标量属性 console.log(window.name); //输出全局变量name的值“小新” console.log(name); //和上面的结果一样，输出全局变量name的值“小新” console.log(window.getAge()); //执行函数，输出2 console.log(window.old); //undefined console.log(delete window.name); //true 删除变量 var a = b; //抛出错误； var c = window.age; var d = window.name; // console.log(c); //12 查询到window属性 console.log(d); //undefinedname是全局变量不是window属性。

【2】窗口关系及框架Window对象并不总是指向最外层，当web中使用框架frame时，window对象就保存框架中，这时候每个框架都有它自己的window属性。因为每个框架都有name属性，所以可以通过name或者id在访问window对象。如果一个html文档中有多个frame框架，还可以通过索引的方式在访问window属性。
除此之外，也可以用top关键字来访问框架，他的作用如同window，为了重复的使用window对象造成凌乱，所以top表示的是最外层window，也就是浏览器窗口。
例如：

window.frames("frame1").contentWindow.name//name = 'frame1'的frame document.getElementById("frame1").contentWindow.name//id = 'frame1'的frame window.$("#frame1")[0].contentWindow.name//id = 'frame1'的frame top.frames[0].contentWindow.name //top表示浏览器

文章图片
【3】窗口位置那怎么表示窗口（浏览器）在屏幕中的位置？不同的浏览器有不同的表示方式，有的浏览器用screenLeft和screenTop表示窗口的位置，有的浏览器用screenX，和screenY。不同的属性表示的都是同样的意思，就是浏览器距离屏幕左边和上面的距离，以屏幕的左上交为圆心表示的二维距离，就是窗口的位置。
所以在使用时，首先要判断该浏览器用的是screenLeft还是screenX。另外窗口是可以移动的，可以用moveBy和moveTo方法移动，如下面的例子。不过其他教程说这两种方法会被禁用，我试了以下，确实不行，移动不了，然后我用window.open( )打开一个新的窗口，在对新的窗口进行移动就可以了。
例如：

var x,y; if(window.screenLeft){// 判断浏览器用的是screenLeft还是screenX x= window.screenLeft; y= window.screenTop; } else{ x= window.screenX; y= window.screenY; } console.log(x+","+y)//输出0，0window.moveBy(0,500); window.moveBy(200,0)//moveBy是在X或者Y上移动； window.moveTo(500,200); //moveTo是在X,Y上都有移动

【4】窗口大小在窗口的大小中，浏览器提供了4个属性，innerWidth，innerHeight和outerWidth，outerHeight。innerWidth是窗口内的可视宽度，也就是页面的宽度；而outerWidth表示的是窗口的宽度。上面都是window的属性，在浏览器中，document.documentElement.clientWidth保存了页面视口的信息，document.body.clientHeight保存了body文档的视口的信息。区分这几个属性运用起来就不难了。
除此之外，可以用resizeTo（）和resizeBy（）来调整窗口的大小，用法和上面window对象中窗口位置移动的方法一样，resizeTo是新的宽度和高度，resizeBy是在原来的尺寸上改动。
例如：

var pagex = window.innerWidth; //可视宽度 var winx = window.outerWidth; //窗口宽度 console.log(pagex); console.log(winx); var pageW = document.documentElement.clientWidth; //可视宽度 var pageH = document.body.clientHeight; //页面高度 console.log(pageW); console.log(pageH); window.resizeTo(500,500); window.resizeBy(500,500);

【5】导航及打开新窗口Window.open( )可以作为导航和打开新的窗口。Window.open( )接受4个参数，第一参数是一个url地址，第二参数是target值，可以是一个框架的名或者是target的属性值_blank等，第三个参数是对新打开的窗口的设置，是一段对窗口特性设置的字符串，第四个窗口是一个布尔值，true表示替换当前窗口，false表示另外打开新的窗口。不过我试了一下，两个值貌似都是打开新的窗口，替换原来的窗口实效？然后我把第二个参数去掉了，结果是在原来的窗口打开了新的连接，不会替换原来的连接，我以为是替换原来页面的连接，原来是我误解了。
例如：

< a href="https://www.baidu.com/" target="win">打开新页< /a> window.open('https://www.baidu.com/','win','width:200,height:200,top:100, left:100','false')//和以上作用等同，都是打开新页面

1、调整窗口
另外，你有没有发现之前提到的窗口移动moveBy和窗口设置大小resizeTo都被浏览器禁止了，所以无效。这两个属性对于新打开的窗口是有效的。
例如：

var newwin; function openwin(){ newwin = window.open('','','width=200,height=100,top=200,left=200'); //定义窗口 } function movewin(){ newwin.moveTo(400,400); //窗口移动 newwin.resizeTo(500,500); //调整窗口大小

2、屏蔽弹窗
现在的浏览器都带有窗口屏蔽程序，避免那些广告弹来弹去，而且浏览器的屏蔽程序并不是把窗口屏蔽，而是把弹窗都放到右下角了，只显示弹窗的标题。
要手动屏蔽其实也简单。
例如：
newwin = null;
【6】间歇性调用与超时调用间歇性调用与超时调用和超时调用都是window对象的方法。超时我们平时比较常见，setTimeout( )有两个参数，第一个参数是一个包含代码块的字符串，在这里，建议使用函数，因为函数具有整体性，字符串解析起来废内存；第二个参数是一个超时时间，超多该时间，代码块才会被执行。因为JavaScript是一个单线程语言，所以执行代码时会有一个队列，都是等待执行的程序，超时时间就是过了多久之后吧程序加入到队列中，如果队列中没有没有程序在排队，那么setTimeout中的程序会马上执行。否则要等前面的执行了才能执行setTimeout中的程序。更神奇的是，setTimeout方法会返回一直数值，是这个方法在程序中的id,用于表示该程序，可以用这个id作为方法去找到这个超时调用然后用clearTimeout方法停止执行它。
间歇调用其实和超市调用一样的用法，也是带两个参数，不过，间歇调用会隔一段时间就重复调用，所以清除间歇调用尤为重要。而且间歇调用会在上一个间歇调用还没完成时就执行下一个了，所以有点不靠谱，还是老老实实使用setTimeout吧。
例如：

var timeoutID = setTimeout(function(){ alert("超时调用") },1000)//设置1000毫秒向队列添加函数 console.log(timeoutID); //id是1 clearTimeout(timeoutID); //清除setTimeout调用var IntervalID = setInterval(function(){ alert("超时调用") },500)//设置1000毫秒向队列添加函数,并且会重复调用 clearInterval(IntervalID); //清除setInterval调用

【7】系统对话框系统对话框是window对象的属性，浏览器有三个方法对话框，分别是alert（）,confirm（）和prompt（）。系统对话框是页面没什么关系，也没有css样式和html，是增强了web应用程序的一种便捷方式。alert（）是警告的作用，只是弹窗出来通知，没有其他反馈的信息；而confirm（）多了一个建，分别是确定和取消，确定的时候有进一步的操作，取消则没有；prompt（）方法就更复杂一点了，多了一个输入框，有用户可以输入的信息，返回的是用户输入的结果。在这三种方法执行的时候，程序都是停止的，只有确定或者取消他们的时候，程序才继续执行。
例如：

alert("hello"); //警告提示if (confirm("are you sure")){ alert("yes"); //按ok的时候 }else{ alert("no")//按取消的时候 }var name = prompt("what is your name?",""); //返回的结果 if(name!=null){ alert(name);

以上是关于window对象的属性和方法总结。希望大家在看的时候一边动手，特别是setInterval（）方法与超时调用的方法的区别。