《JavaScript高级程序设计》BOM

最新推荐文章于 2024-07-12 14:10:05 发布

君亦信

最新推荐文章于 2024-07-12 14:10:05 发布

阅读量412

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u012136450/article/details/45151327

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1、window对象

BOM的核心是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的一个Global对象。

全局作用域

所有在全局作用域中声明的变量和函数都会变成window对象都属性和方法。

var age = 21;
function sayAge(){
    alert(this.age);
}

alert(window.age);  //21
sayAge();           //21
window.sayAge();    //21

窗口大小

//取得页面视口大小
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;
    }
}

弹出窗口屏蔽

如果是浏览器扩展或其他程序阻止都弹出窗口，那么window.open()通畅会抛出一个错误。因此，药箱准确都检测出弹出窗口是否被屏蔽，必须在检测返回值都同时，将对window.open()的调用封装在一个try-catch块中。

var blocked = false;

try{
    var wroWin = window.open("http://www.wrox.com","_blank");
    if(wroWin == null){
        blocked = true;
    }
} catch(ex){
    blocked = true;
}

if(blocked){
    alert("The popup was blocked.");
}

间歇调用和超时调用

javascript是单线程语言，但它允许通过设置超时值(在指定的时间后执行代码)和间歇值(每隔指定的时间就执行一次代码)来调度代码在特定的时刻运行。

//设置超时调用
var timeoutId = setTimeout(function(){
    alert("Hello World.");
},1000);

//把它取消
clearTimeout(timeoutId);

//设置间歇调用
var num;
var max = 10;
var intervalId = null;
function incrementNumber(){
    num++;

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

    //这个模式也可以用超时调用来实现
    //如果执行次数未达到max，则设置另一次超时调用
    if(num < max){
        setTimeout(incrementNumber,500);
    } else {
        alert("Done");
    }
}

intervalId = setInterval(incrementNumber,500);
setTimeout(incrementNumber,500);

系统对话框

包含三个方法：alert(),confirm()和prompt()。

//alert 打印一个警告框
alert("Hehe");

//confirm()
if(confirm("are you sure?")){
    alert("Yes");
} else {
    alert("No");
}

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

2、location对象

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还有一些导航信息和将URL解析为独立的片段，让开发人员可以通过不同的属性访问这些片段。

属性名	例子	说明
hash	“#contents”	返回URL中的hash
host	“wwww.wrox.com:80”	返回服务器名称和端口
hostname	“www.wrox.com”	返回不带端口号的服务器名称
href	“http://www.wrox.com”	返回加载页面的完整URL
pathname	“/WileyCDA/”	返回URL中的目录和文件名
port	“8080”	返回URL中指定的端口号
protocol	“http:”	返回页面使用的协议
search	“?q=javascript”	返回URL查询的字符串

每次修改location的属性(hash除外)，页面都会以新URL重新加载。

查询字符串参数

location.search返回从问号到URL末尾到所有内容，但却没有办法逐个访问其中但每个查询字符串参数。我们可以创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象。

function getQueryStringArgs(){
    //取得查询字符串并去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //保存数据的对象
    args = {},
    //取得每一项
    items = qs.length ? qs.spilt("&") : [],
    item = null,
    name = null,
    value = null,
    i = 0,
    len = items.length;

    //逐个将每一项添加到args对象中
    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;
}

//使用示例
//假设查询字符串是?q=javascript&num=10
var args = getQueryStringArgs();
alert(args["q"]);    //"javascript"
alert(args["num"]);  //"10"

位置操作

使用location对象可以通过很多方式来改变浏览器的位置，最常用的方法是assign(),

location.assign("http://www.wrox.com");
//下面两行代码与显示调用assign()方法的效果完全一样
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

当通过修改location对象的属性修改URL时，浏览器的历史记录中就会生成一条新记录，因此单击“后退”按钮都会导航到前一个页面,可以通过replace()方法禁用这种行为。

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
</head>
<body>
    <script>
        setTimeout(function(){
            location.replace("http://www.wrox.com");
        },1000);
    </script>
</body>
</html>

如果将上面这个页面加载到浏览器中，1秒之后会重新定向到www.wrox.com，“后退”按钮处于禁用状态。还有一个方法与位置有关：reload()，作用是重新加载当前页面。

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

3、navigator对象

navigator对象用于识别客户端的浏览器

检测插件

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

//检测所有浏览器中的QuickTime
function hasQuickTime(){
    var result = hasPlugin("QuickTime");
    if(!result){
        result = hasIEPlugin("QuickTime.QuickTime");
    }
    return result;
}

注册处理程序

HTML5中为navigator对象新增了两个方法，registerContentHandler()和registerProtocolHandler()。

4、history对象

history对象保存着用户上网的历史记录，同时它也是window对象的属性。

//后退一页
history.go(-1);
history.back();
//前进一页
history.go(1);
history.forward();
//前进两页
history.go(2);

//跳转到最近到wrox.com
history.go("wrox.com");

//length属性
if(history.length == 0){
    //这是用户打开窗口的第一个页面
}