JavaScript BOM——“window 对象”的注意要点

时间  2020-02-06
标签 javascript bom window 对象 注意 要点 栏目 JavaScript 繁體版
原文   原文链接

全局做用域

window 在是BOM 的核心对象，他是浏览器的一个实例。浏览器

在全局做用域中声明的变量、函数都会变成window 对象的属性和方法。如：框架

var age = 18;
function sayAge(){
    console.log(window.age);
}

console.log(window.age); //18
sayAge(); //18
window.sayAge(); //18

定义全局变量与在 window 对象上直接定义属性还
是有一点差异：全局变量不能经过 delete 操做符删除，而直接在 window 对象上的定义的属性能够。如：函数

var age = 29; // var 语句添加的 window 属性[[Configurable]] 为 false
window.color = "red";
//在 IE < 9 时抛出错误，在其余全部浏览器中都返回 false
delete window.age;
//在 IE < 9 时抛出错误，在其余全部浏览器中都返回 true
delete window.color; //returns true
alert(window.age); //29
alert(window.color); //undefined

另外，经过查询 window 对象，能够知道某个可能未声明的变量是否存在，如：工具

var newValue = oldValue; //oldValue is not defined

var newValue = window.oldValue; //这个算是查询，若是没有定义也不会报错

窗口关系及框架

top

每一个框架都拥有本身的window 对象，而且保存在frames 集合中。每一个 window 对象都有一个 name 属性，其中包含框架的名称。如：性能

<frameset rows="160,*">
<frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
</frameset>

以上代码建立了一个框架集，其中一个框架居上，两个框架居下。能够经过window.frames[0] 或者 window.frames["topFrame"] 来引用上方的框架。不过，恐怕最好使用top 而非 window 来引用这些框架（例如，经过 top.frames[0] ）。学习

parent

与 top 相对的另外一个 window 对象是 parent 。 parent （父）对象始终指向当前框架的直接上层框架。在没有框架的状况下， parent 必定等于top （此时它们都等于 window ）。如：插件

<frameset rows="100,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="anotherframeset.htm" name="rightFrame">
    </frameset>
</frameset>

这个框架集中的一个框架包含了另外一个框架集，该框架集的代码以下所示。线程

<frameset cols="50%,50%">
    <frame src="red.htm" name="redFrame">
    <frame src="blue.htm" name="blueFrame">
</frameset>

若是代码位于redFrame（或blueFrame）中，那么parent 对象指向的就是 rightFrame 。若是代码位于topFrame 中，则parent 指向的是top。code

self

与框架有关的最后一个对象是 self ，它始终指向 window ；实际上， self 和 window 对象能够互
换使用。引入 self 对象的目的只是为了与 top 和 parent 对象对应起来，所以它不格外包含其余值。htm

窗口位置

screenLeft和screenTop

screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置。Firefox 则在screenX 和 screenY 属性中提供相同的窗口位置信息，Safari 和 Chrome 也同时支持这两个属性。Opera虽然也支持 screenX 和 screenY 属性，但与 screenLeft 和 screenTop 属性并不对应，所以建议你们不要在 Opera 中使用它们。如：

<body>
    <input type="text" id="input">
    <script>
        var x = self.setInterval("getPos()",10);
        var input = document.getElementById("input");
        
        function getPos(){
            var leftPos;
            if(typeof window.screenLeft == "number"){ //首先肯定screenLeft 和screenTop 属性是否存在，若是不存在（在 Firefox 中），则取得screenX 和screenY 的值。
                leftPos = window.screenLeft;
            }else{
                leftPos = screenX;
            }
            input.value = leftPos;
        }
    </script>
</body>

上面这个代码能够直接在input 中显示screenLeft 或screenX 的值。

因为各类缘由，没法在跨浏览器的条件下取得窗口左边和上边的精确坐标值。

moveTo和moveBy

这两个方法都接收两个参数，其中moveTo() 接收的是新位置的 x 和 y 坐标值，而 moveBy() 接收的是在水平和垂直方向上移动的像素数。如：

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

须要注意的是，这两个方法可能会被浏览器禁用，这两个方法都不适用于框架，只能对最外层的 window 对象使用。

窗口大小

innerWidth、innerHeight、outerWidth和outerHeight

  • 在 IE9+、Safari和 Firefox中， outerWidth 和 outerHeight 返回浏览器窗口自己的尺寸。

  • 在Opera中， outerWidth 和 outerHeight 这两个属性的值表示页面视图容器的大小。

  • 而innerWidth 和 innerHeight则表示该容器中页面视图区的大小。

  • 在 Chrome 中， outerWidth 、 outerHeight 与innerWidth 、 innerHeight 返回相同的值，即视口（viewport）大小。

  • IE8 及更早版本没有提供取得当前浏览器窗口尺寸的属性，单能够经过DOM 取得可见区域的相关信息：

    • 在 IE、Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth 和document.documentElement.clientHeight 中保存了页面视口的信息。

    • 在 IE6 中，这些属性必须在标准模式下才有效；若是是混杂模式，就必须经过 document.body.clientWidth 和 document.body.clientHeight 取得相同信息。

    • 而对于混杂模式下的 Chrome，则不管经过 document.documentElement 仍是 document.body 中的 clientWidth 和 clientHeight 属性，均可以取得视口的大小。

因此没法准确肯定窗口自己的大小，但能够取得准确的页面视口的大小：

  • 其余浏览器能够经过innerWidth 和innerHeight 取得；

  • IE8 以前能够经过DOM 取得：

    • 标准模式下经过document.documentElement.clientWidth 和document.documentElement.clientHeight 取得；

    • 混杂模式下经过document.body.clientWidth 和document.body.clientHeight取得；

能够用如下代码获取innerWidth 和innerHeight（其中，document.compatMode用来判断当前浏览器采用的渲染方式。BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启。）：

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
    if (document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

其余具体的有关移动设备视口的话题，推荐学习移动Web 开发。

resizeTo和resizeBy方法

这两个方法都接收两个参数，其中 resizeTo() 接收浏览器窗口的新宽度和新高度，而 resizeBy() 接收新窗口与原窗口的宽度和高度之差。如：

//调整到 100×100
window.resizeTo(100, 100);
//调整到 200×150
window.resizeBy(100, 50);
//调整到 300×300
window.resizeTo(300, 300);

有可能被浏览器禁用。

导航和打开窗口

使用 window.open() 方法既能够导航到一个特定的 URL，也能够打开一个新的浏览器窗口。这个方法能够接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。一般只须传递第一个参数，最后一个参数只在不打开新窗口的状况下使用。

//等同于< a href="http://www.wrox.com" target="topFrame"></a>
window.open("http://www.wrox.com/", "topFrame");

意思是在名为'topFrame'的框架中打开URL。这个参数也能够是： _self 、 _parent 、 _top 或 _blank 。

弹出窗口

若是给 window.open() 传递的第二个参数并非一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串建立一个新窗口或新标签页。若是没有传入第三个参数，那么就会打开一个带有所有默认设置的新浏览器窗口。第三个参数主要有：

fullscreen
yes 或 no 表示浏览器窗口是否最大化。仅限IE

height
数值  表示新窗口的高度。不能小于100

width
数值  表示新窗口的宽度。不能小于100

top
数值  表示新窗口的上坐标。不能是负值

left
数值  表示新窗口的左坐标。不能是负值
location
yes 或 no 表示是否在浏览器窗口中显示地址栏。不一样浏览器的默认值不一样。若是设置为no，地址栏可能会隐藏，也可能会被禁用（取决于浏览器）

menubar
yes 或 no 表示是否在浏览器窗口中显示菜单栏。默认值为 no

resizable
yes 或 no 表示是否能够经过拖动浏览器窗口的边框改变其大小。默认值为 no

scrollbars
yes 或 no 表示若是内容在视口中显示不下，是否容许滚动。默认值为 no

status
yes 或 no 表示是否在浏览器窗口中显示状态栏。默认值为 no

toolbar
yes 或 no 表示是否在浏览器窗口中显示工具栏。默认值为 no

注意，整个特性字符串中不容许出现空格。

调整新窗口大小

有些浏览器不容许咱们针对主浏览器窗口调整大小或移动位置。经过 window.open 返回的对象，能够像操做其余窗口同样操做新打开的窗口：

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");
newWindow.resizeTo(400,1000);

关闭新窗口

调用 close() 方法还能够关闭新打开的窗口。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

newWindow.close(); //打开以后马上关闭

固然也可使用window.close()。

opener属性

opener 属性，其中保存着打开它的原始窗口对象。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

document.write(newWindow.opener == window); //true

将 opener 属性设置为 null 就是告诉浏览器新建立的标签页不须要与打开它的标签页通讯，所以能够在独立的进程中运行。

var newWindow = window.open("http://www.baidu.com/", "_blank","fullscreen=yes");

newWindow.opener = null;

弹出窗口屏蔽程序

两种状况：

  1. 浏览器内置的屏蔽程序阻止的弹出窗口，window.open() 返回null，只要检测这个值便可；

  2. 浏览器扩展或其余程序阻止的弹出窗口，window.open() 抛出错误，则须要把 window.open() 封装在一个 try-catch 块中；

对于第一种：

var popWin = window.open("http://www.baidu.com/","_blank");
if (popWin == null){
    console.log("the popup was blocked by explorer!")
}

若是 popWin 被浏览器内置的屏蔽程序阻止了，检测到 popWin 的值为 null；

对于第二种：

var blocked = false; //预设弹出窗口没有被屏蔽

//try-catch 代码块开始
try {
    var popWin = window.open("http://www.baidu.com/","_blank");
    if (popWin == null){
        blocked = true; //若是值为null，说明被浏览器内置屏蔽程序屏蔽
    }
} catch(ex){
    blocked = true; //若是收到错误，说明被浏览器屏蔽插件屏蔽
}
//try-catch 代码块结束

//若是被屏蔽，返回字符串提示
if (blocked){
    console.log("the popup was blocked!")
}

间歇调用和超时调用

JavaScript 是单线程语言。一个是在指定的时间后执行代码，另外一个是每隔指定的时间就执行一次代码。

setTimeout()方法

接收两个参数，一个是要执行的代码，一个是以毫秒为单位的时间。如：

setTimeout("document.write('running!')", 1000);

setTimeout(function(){
    document.write("running it!")
}, 2000);

因为传递字符串会致使性能问题，所以不建议用字符串做为第一个参数。

另外，JavaScript 有一个任务列队，若是列队是空的，添加的代码会当即执行；若是列队不是空的，那么要等到前面的代码执行完了之后再执行。

clearTimeout()方法

调用setTimeout()方法后，该方法会返回一个调用 ID。这个超时调用 ID 是计划执行代码的惟一标识符，能够经过它来取消超时调用。如：

var x = setTimeout(function(){
    document.write("running it!")
}, 3000);

setTimeout(function(){
    clearTimeout(x)
}, 2000); //由于在2秒钟的时候把 x 超时调用取消了，因此 3 秒后的超时调用则不会出现。

setInterval()方法 （因为一些缘由，最好不要使用间歇调用）

参数仍然是两个，一个是指定的执行代码，另外一个是间歇时间。如：

setInterval("document.write('running!')", 1000);

setInterval(function(){
    document.write("running it!!!")
}, 1500);

一样的，调用该方法会返回一个间歇调用ID。使用clearInterval()中止：

var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;

var x = setInterval(showList, 100);
function showList(){
    console.log(list[num]);
    num ++;
    if (num == list.length){
        clearInterval(x)
        console.log("done!")
    }
}

如上，以 100 毫秒的速度遍历全部 list 的值。

也可使用超时调用来实现，如：

var list = [32,14,21,34,254,3,25,4315,43,654,36,5431,1];
var num = 0;

setTimeout(showList, 100);

function showList(){
    console.log(list[num]);
    num ++;
    if (num < list.length){
        setTimeout(showList, 100);
    }else{
        console.log("done!");
    }
}

最好使用超时调用来模拟间歇调用。

系统对话框

alert()

一个字符串参数，并将其显示给用户。

confirm()

一个字符串参数，并将其显示给用户，提供两个按钮，一个 Ok 按钮返回布尔值 true；另外一个按钮 Cancel 返回布尔值 false。

prompt()

一个“提示框”，接收连两个参数： 要显示给用户的文本提示和文本输入域的默认值（能够为空字符串）。

如：

var str = prompt("insert your name here", "");
if (str.length > 0){
    alert("welcome " + str);
    var result = confirm("would you want something to drink ?");
    if (result){
        document.write("please wait");
    }else{
        document.write("have a seat");
    }
}else {
    alert("can not define");
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程