第八章 BOM

最新推荐文章于 2023-03-18 10:01:53 发布

哈哩噜啾啾哈呀呀

最新推荐文章于 2023-03-18 10:01:53 发布

阅读量119

点赞数

分类专栏： # JavaScript高级程序设计读书笔记

本文链接：https://blog.csdn.net/weixin_42798473/article/details/105324704

版权

读书笔记同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

JavaScript高级程序设计

11 篇文章 0 订阅

订阅专栏

window 对象

全局变量不能通过 delete 操作符删除，而直接在 window 对象上的定义的属性可以。

        var age = 29;
        window.color = "red";
        
        //throws an error in IE < 9, returns false in all other browsers
        delete window.age;

        //throws an error in IE < 9, returns true in all other browsers
        delete window.color;    //returns true
        
        alert(window.age);      //29
        alert(window.color);    //undefined

使用 var 语句添加的 window 属性有一个名为[[Configurable]]的特性，这个特性的值被设置为false，因此这样定义的属性不可以通过delete操作符删除

窗口位置

screenLeft 和 screenTop 属性，分别用于表示窗口相对于屏幕左边和上边的位置
，使用 moveTo() 和 moveBy()方法倒是有可能将窗口精确地移动到一个新位置。这两个方法都接收两个参数，其中moveTo()接收的是新位置的 x和 y坐标值，而 moveBy()接收的是在水平和垂直方向上移动的像素数。

窗口大小

document.documentElement.clientWidth 和 document.documentElement.clientHeight 中保存了页面视口的信息
使用 resizeTo()和 resizeBy()方法可以调整浏览器窗口的大小
其中 resizeTo()接收浏览器窗口的新宽度和新高度，而 resizeBy()接收新窗口与原窗口的宽度和高度之差

导航和打开窗口

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

第二个参数也可以是下列任何一个特殊的窗口名称：_self、_parent、_top 或_blank。
第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性
window.open()方法会返回一个指向新窗口的引用。引用的对象与其他 window 对象大致相似，但我们可以对其进行更多控制。
调用 close()方法还可以关闭新打开的窗口。
但是，这个方法仅适用于通过 window.open()打开的弹出窗口。

setTimeout

超时调用需要使用 window 对象的 setTimeout()方法，它接受两个参数：要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）。其中，第一个参数可以是一个包含 JavaScript代码的字符串（就和在 eval()函数中使用的字符串一样），也可以是一个函数。

setTimeout的第一个参数是可以放字符串的
setTimeout()的第二个参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

var timeoutId = setTimeout(function() {
     alert("Hello world!"); 
}, 0); 
 
clearTimeout(timeoutId); 
// 此时alert()不会执行，setTimeout内为第二个宏任务，clearTimeout属于第一个宏任务，会先执行clearTimeout

setInterval()

在不加干涉的情况下，间歇调用将会一直执行到页面卸载
一般认为，使用超时调用来模拟间歇调用的是一种佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面示例中那样使用超时调用，则完全可以避免这一点。所以，最好不要使用间歇调用。

var num = 0;
var max = 100;

function incrementNumber() {
    num++;

    //if the max has not been reached, set another timeout
    if (num < max) {
        setTimeout(incrementNumber, 500);
    } else {
        alert("Done");
    }
}

setTimeout(incrementNumber, 500);

时间是从执行到setInterval这一行时开始计算的，到时间后会把function添加到任务队列中，所以很有可能上一个任务还没有执行或者结束，下一个任务就被添加到队列中了
上面的方法是固定间隔执行的最佳实践

系统对话框

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息。

通过这几个方法打开的对话框都是同步和模态的。也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行。

location 对象

location 是有用的 BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是 document 对象的属性；换句话说，window.location 和 document.location 引用的是同一个对象。 location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

解析url中的参数

function getQueryStringArgs(){

    //get query string without the initial ?
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    
        //object to hold data
        args = {},
    
        //get individual items
        items = qs.length ? qs.split("&") : [],
        item = null,
        name = null,
        value = null,
        
        //used in for loop
        i = 0,
        len = items.length;
    
    //assign each item onto the args object
    for (i=0; i < len; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        
        if (name.length){
            args[name] = value;
        }
    }
    
    return args;
}

//assume query string of ?q=javascript&num=10

var args = getQueryStringArgs();

alert(args["q"]);     //"javascript"
alert(args["num"]);   //"10"

位置操作

使用 assign()方法并为其传递一个 URL
location.assign("http://www.wrox.com");
这样，就可以立即打开新 URL并在浏览器的历史记录中生成一条记录。
修改location对象的其他属性也可以改变当前加载的页面,了通过将hash、 search、hostname、pathname 和 port 属性设置为新值来改变 URL。
当通过上述任何一种方式修改 URL 之后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用 replace()方法。这个方法只接受一个参数，即要导航到的 URL；结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用 replace()方法之后，用户不能回到前一个页面
如果调用 reload() 时不传递任何参数，页面就会以有效的方式重新加载。也就是说，如果页面自上次请求以来并没有改变过，页面就会从浏览器缓存中重新加载。如果要强制从服务器重新加载，则需要传递参数 true。

navigator 对象

navigator 对象，现在已经成为识别客户端浏览器的事实标准。
常见属性：userAgent，userLanguage ，systemLanguage ，platform ，plugins ，preference()，language ，appName ，appVersion ，cookieEnabled

检测插件

检测浏览器中是否安装了特定的插件是一种常见的检测例程。对于非 IE 浏览器，可以使用 plugins 数组来达到这个目的。

screen 对象

screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素宽度和高度等。

运行 iOS 的设备始终会像是把设备竖着拿在手里一样，因此返回的值是768×1024。而Android设备则会相应调用 screen.width 和 screen.height 的值。

history 对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。因为 history 是 window 对象的属性，因此每个浏览器窗口、每个标签页乃至每个框架，都有自己的 history 对象与特定的 window 对象关联。出于安全方面的考虑，开发人员无法得知用户浏览过的 URL。不过，借由用户访问过的页面列表，同样可以在不知道实际 URL的情况下实现后退和前进。

使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转（类似于单击浏览器的“后退”按钮），正数表示向前跳转（类似于单击浏览器的“前进”按钮）。
也可以给 go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退，也可能前进，具体要看哪个位置近。如果历史记录中不包含该字符串，那么这个方法什么也不做
back()和 forward()这两个方法可以模仿浏览器的“后退”和“前进”按钮。
history 对象还有一个 length 属性，保存着历史记录的数量。这个数量包括所有历史记录，即所有向后和向前的记录。对于加载到窗口、标签页或框架中的第一个页面而言， history.length 等于 0。可以通过这个方法确定用户是否一开始就打开了你的页面。