Javascript-BOM

2018-01-08 本文已影响0人 Tom36

一、window对象

1、全局作用域

在全局作用域中定义的变量和函数都会变成window对象的属性和方法

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

区别：

定义全局变量与在window 对象上直接定义属性还是有一点差别：全局变量不能通过delete 操作符删除，而直接在window 对象上的定义的属性可以。例如：

window.color = "red";
//在IE < 9 时抛出错误，在其他所有浏览器中都返回false
delete window.age;
//在IE < 9 时抛出错误，在其他所有浏览器中都返回true
delete window.color;
console.log(window.age); //23
console.log(window.color);  //undefined

尝试访问未声明的变量会抛出错误，但是通过查询window 对象，可以知道某个可能未声明的变量是否存在。例如：

//抛出错误
var newValue = oldValue;  //Uncaught ReferenceError: oldValue is not defined
//没有错误
var newValue = window.oldValue;

2、窗口关系和框架

如果页面中包含框架，则每个框架都拥有自己的window 对象，并且保存在frames 集合中。在frames集合中，可以通过数值索引（从0 开始，从左至右，从上到下）或者框架名称来访问相应的window 对象。每个window 对象都有一个name 属性，其中包含框架的名称。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <frameset>
            <frame src="frame.htm" name="topFrame">
            <frameset>
                <frame src="anotherframe.htm" name="leftFrame">
                <frame src="yetanoterframe.htm" name="rightFrame">
            </frameset>
        </frameset>
    </body>
</html>

3、窗口位置

下面的代码在我们改变浏览器窗口相对于屏幕的位置的时候，打印出来的位置也会改变

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

4、窗口大小

5、导航和打开窗口

6、间歇调用和超时调用

setTimeout()
clearTimeout()
setInterval()
clearInterval()

7、系统对话框

alert("hello, Tom");

if(confirm("are you sure?")){
    alert("i am glad you'are sure!");
}else{
    alert("i'm sorry to hear you're not sure.");
}

var result = prompt("What is your name?","");
if(result !== null){
    alert("Welcome, " + result);
}

二、location对象

location 对象是很特别的一个对象，因为它既是window 对象的属性，也是document 对象的属性；换句话说，window.location 和document.location 引用的是同一个对象。

location属性.PNG

1、逐个访问其中的每个查询字符串参数

2、位置操作

hash、search、hostname、pathname 和port 属性设置为新值来改变URL。
当通过上述任何一种方式修改URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用replace()方法。这个方法只接受一个参数，即要导航到的URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用replace()方法之后，用户不能回到前一个页面

location.reload(); //重新加载（有可能从缓存中加载）
location.reload(true); //重新加载（从服务器重新加载）

三、navigation对象

包含着浏览器的一些信息

四、screen对象

不常用

五、history对象

history.go()
history.back()
history.forward()
history.length