JS学习笔记（五）（BOM）

2017-04-21  本文已影响88人  丨ouo丨

<h1 id="8">第8章 BOM</h1>
本章内容主要是

<h2 id="8.1">8.1 window对象</h2>

<h3 id="8.1.1">8.1.1 全局作用域</h3>

<h3 id="8.1.2">8.1.2 窗口关系及框架</h3>

top对象：

window对象：

parent对象:

self对象：

<h3 id="8.1.3">8.1.3 窗口关系及框架</h3>

跨浏览器取得窗口左边和上边的位置：

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

这是因为Safari、Opera和Chrome中存在screenLeft和screenTop属性，而在Firefox中是scrrenX和ScreenY

无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值，因为在Firefox和Safari中返回的是整个浏览器窗口相对于屏幕的坐标值，在IE、Opera和Chrome中返回的是页面可见区域（不包括工具栏）到屏幕左边和上边的值

将窗口精确地移动到一个新位置的方法：
这两种方法可能会被浏览器禁用。且不适用于框架，只对最外层的window对象使用

<h3 id="8.1.4">8.1.4 窗口大小</h3>

不同浏览器中返回的innerWidth、innerHeight、outerWidth和outerHeight不一样，因此无法最终确定浏览器窗口本身的大小，但可以取得页面视口的大小

var pageWidth = wimdow.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;
    }
}

调整浏览器窗口大小的两个方法：
与移动窗口位置的两个方法类似，也有可能被浏览器禁用。同样不适用于框架，只能对最外层的window对象使用

<h3 id="8.1.5">8.1.5 导航和打开窗口</h3>

window.open()：

弹出窗口屏蔽程序

  1. 内置的屏蔽程序阻止弹出窗口：window.open()返回null

  2. 扩展或其他程序阻止弹出窗口：抛出一个错误
    因此准确检测出弹出窗口是否被屏蔽的代码如下：

    var blocked = false;
    try {
    var wroWin = window.open(http://www.baidu.com/","_blank");
    if(wroWin == null){
    blocked = true;
    }
    } catch (ex){
    blocked = true;
    }
    if(blocked){
    alert("The popup was blocked");
    }

<h3 id="8.1.6">8.1.6 间歇调用和超时调用</h3>

JS是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。

  1. 超时调用：setTimeOut()

    • 参数：要执行的代码和以毫秒表示的时间

      • 第一个参数：可以是一个包含JS代码的字符串（同eval()函数里的字符串），也可以是一个函数
      • 不建议以字符串作为第一个参数。因为可能导致性能缺失
      • 第二个参数：是一个表示等待多长时间的毫秒数。JS是一个单线程的解释器，有一个JS任务队列，这些任务按照将它们添加到队列 的顺序执行。也就是说这个参数只是指定多长时间后把任务添加到队列。但不一定会立即执行（前面可能还有任务）。

    • 返回：一个数值ID，表示超时调用

      • 这个超时调用ID是计划执行代码的唯一标识符

      • 只要指定的时间尚未过去，就可以取消尚未执行的超时调用计划：传入ID

        clearTimeOut(timeoutId);

  2. 间歇调用：setInterval()

    • 参数：（与setTimeOut()相同）要执行的代码和以毫秒表示的时间
    • 区别：按照指定的时间间隔重复执行代码，直到间歇调用被取消或者页面被卸载
    • 返回：间歇调用ID
    • 取消：clearInterval(Id)

一个常见的使用间歇调用的例子

var num =0;
var max = 10;
var intervalId = null;

function incrementNumber(){
    num++;
    //如果执行次数达到max，则取消后续尚未执行的调用
    if(num == max){
        clearInterval(intervalId);
        alert("Done");
    }
}

intervalId = setInterval(incrementNumber,500);

与以上代码相同功能的超时调用：

var num = 0;
var max = 10;
function incrementMunber(){
    num++;
    if(num < max){
        setTimeout(incrementNumber,500);
    }else{
        alert("Done");
    }
}
setTimeout(incrementNumber,500);

比较上面两段代码，可以看出超时调用不需要跟踪超时调用ID。一般认为，使用超时调用模拟间歇调用是一种最佳模式。在开发环境下，很少使用间歇调用，因为后一个间歇调用可能会在前一个间歇调用结束前启动。所以最好不要使用间歇调用

<h3 id="8.1.7">8.1.7 系统对话框</h3>

以下三个不涉及HTML、CSS、JS

以下两个可以通过JS打开的对话框：查找和打印。这两个对话框都是异步显示的，能够将控制权立即交还给脚本。与用户通过浏览器菜单的查找和打印命令打开的对话框相同

<h2 id="8.2">8.2 location对象</h2>

location提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
location既是window对象的属性，也是document对象的属性。
location将URL解析为独立的片段

<h3 id="8.2.1">8.2.1 查询字符串参数</h3>

以下函数解析查询字符串，然后返回包含所有参数的一个对象：

function getQueryStringArgs(){
    var qs = location.search.length > 0 ? location.search.substring(1) : "";
    var args = {};
    var items = qs.length > 0 ? qs.split("&") : [];
    var item = null;
    var name = null;
    var value = null;
    for(var i = 0; i<items.length; i++){
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if(name.length){
            args[name] = value;
        }
    }
    return args;

}

<h3 id="8.2.2">8.2.2 位置操作</h3>

以下三种方法本质上都是调用assign()方法，location.href比较常用

通过改变location对象的其他属性值来改变当前加载的页面：

//假设初始URL为http://www.wrox.com/WileyCDA/

//http://www.wrox.com/WileyCDA/#section1
location.hash = "#section1";

//http://www.wrox.com/WileyCDA/?q=javascript
location.search = "?q=javascript";

//http://www.yahoo.com/WileyCDA/
location.hostname = "www.yahoo.com";

//http://www.wrox.com/mydir/
location.pathname = "mydir";

//http://www.wrox.com:8080/WileyCDA/
location.port = 8080;

每次修改location的属性（除hash），页面都会以新URL重新加载

replace()方法：

reload()方法：

<h2 id="8.3">8.3 navigator对象</h2>

navigator对象的属性通常用于检测显示网页的浏览器类型

<h3 id="8.3.1">8.3.1 检测插件</h3>

非IE：

IE：

因此在所有浏览器中检测时要针对每个插件分别创建函数：

//检测所有浏览器中的Flash
function hasFlash(){
    var result = hasPlungin("Flash");
    if(!result){
        result = hasIEPlungin("ShockwaveFlash.ShockwaveFlash");
    }
    return result;
}

<h3 id="8.3.2">8.3.2 注册处理程序</h3>

<h2 id="8.4">8.4 screen对象</h2>

用来表现客户端能力

<h2 id="8.5">8.5 history对象</h2>

用来保存历史记录

<h2 id="8.6">8.6 小结</h2>

上一篇下一篇

猜你喜欢

热点阅读