小柒

www.xiaoqi.cn

0%

BOM

发表于 更新于 分类于

BOM

location对象

提供当前窗口加载文档的信息，以及通常的导航功能，它既是window的属性也是document的属性。

查询字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let getQueryStringArgs=function(){
    //取得没有开头问号的查询字符串
    
    let qs=(location.search.length>0)?location.search.substring(1):"";
    let args={};
    for(let item of(qs.split('&').map(kv=>kv.split('=')))){
        let name=item[0];
            value=item[1];
        if(name.length){
            args[name]=value;
        }
    }
    return args;
}
//qs="?q=javaScript&num=10";
let args=getQueryStringArgs();
alert(args["q"]);
alert(args['num']);

使用USLSearchParams检查和修改查询字符串

1
2
3
4
5
6
7
8
9
10
11
12
let qs="?q=javaScript&num=10";
let searchParams=new URLSearchParams(qs);
alert(searchParams.toString());
searchParams.has("num");
searchParams.get("num");
searchParams.set("page","3");
alert(searchParams.toString());
searchParams.delete("q");
alert(searchParams.toString());
for(let param of searchParams){
    console.log(param);
}

操作地址

通过修改location对象修改浏览器地址，使用assign方法传进一个URL,会导航到新URL同时在浏览器历史记录增加一条记录，下面三种方法功能相同

1
2
3
location.assign("http://www.wrox.com");
window.location="http://www.wrox.com";
location.href="http://www.wrox.com";

通过修改location属性可以修改当前加载的页面,hash,search,hostname,pathname.port属性被设置为新值后会修改当前的URL

1
2
3
4
5
6
7
8
9
10
11
12
//假设当前URL为http://www.wrox.com/WileyCDA/
location.assign("http://www.wrox.com/WileyCDA");
//把URL修改为http://www.wrox.com/WileyCDA/#section1
location.hash="#section1";
//把URL修改为http://www.wrox.com/WileyCDA/?q=javascript
location.search="?q=javascript";
//把URL修改为http://www.somewhere.com/WileyCDA/
location.hostname="www.somewhere.com";
//把URL修改为http://www.somewhere.com/mydir/
location.pathname="mydir";
//把URL修改为http://www.somewhere.com:8080/WileyCDA/
location.port=8080;

以上的修改会在浏览器中增加记录，点击后退即可导航到前一个界面，不希望增加历史记录可以使用replace()方法，reload()可以重新加载当前页面，如果页面自从上次请求后没有修改过，则浏览器可能会从缓存中加载页面，如果想强制从服务器中加载，必须传入true

history对象

history用来导航历史记录，同时不会暴露用户访问过的URL。

1
2
3
4
5
6
7
8
history.go(-1);//后退一页
history.go(1);//前进一页
history.go("wrox.com")//导航到最近的wrox.com页面
//go有两个简写方法：back()和forward()
history.back();//后退一页
history.forward()//前进一页
//history的length属性记录历史记录有多少条目
if(history.length==1){//这是用户窗口第一个页面}

navigator对象通常用来确定浏览器的类型

检测插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function hasPlugin(name){
    name=name.toLowerCase();
    for(let plugin of window.navigator.plugins){
        if(plugin.name.toLowerCase().indexOf(name)>-1){return true;}

    }
    return false;
}
//alert(hasPlugin("Flash"));
//alert(hasPlugin("QuickTime"));
function hasIEPlugin(name){
    try{
        new ActiveXObject(name);
        return true;
    }catch(ex){
        return false;
    }
}
//在所有浏览器中检测插件
function hasFlash(){
    var result=hasPlugin("Flash");
    if(!result){
        result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
    }return result;
}
function hasQuickTime(){
    var res=hasPlugin("QuickTime");
    if(!res){
        res=hasIEPlugin("QuickTime.QuickTime");

    }
    return res;

}
alert(hasFlash());
alert(hasQuickTime());

注册处理程序

registerProtocolHandler()方法可以把一个网站注册处理为某种特定类型信息应用程序，传入3个参数：要处理的协议（“mailto或ftp),处理该协议的URL，以及应用名称

例如，把一个Web应用程序注册为默认客户端

1
navigator.registerProtocolHandler("mailto","http://www.somemailclient.com?cmd=%s","Some Mail Client");