BOM--浏览器对象模型

276 阅读4分钟

1、window对象

window表示浏览器的一个实例,是一个Global对象。所有在全局作用域中声明的变量、函数都会变成window对象的属性方法。

(1)作用域

var color = 'red';
//可以用个window.color访问color的值,不能删除
delete window.color;//false

window.age = 25;
//可以使用delete删除window.age属性
delete window.age;//true

全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。因为[[configurable]]的特性

(2)窗口关系以及框架

top、parent是window的属性,self和window可以互换使用

//链式调用
window.parent.parent.frames[0];

(3)窗口的位置

整个浏览器窗口相对于屏幕左边和上边的位置,Chrome,Safari,Firefox

或从屏幕左边或者上边到由window对象表示的页面可见区域的距离,IE,Opera

//浏览器差异
window.screenLeft
window.screenTopwindow.screenX
window.screenY

将窗口精确的移动到一个新的位置

//不适用框架,只能对最外层的window对象,默认被浏览器禁用
window.removeTo(0, 0);
window.removeBy(0, -50);

(4)窗口大小

//
window.innerWidth
window.innerHeight

window.outerWidth
window.outerHeight

//页面视口的宽度
document.documentElement.clineWidth
document.documentElement.clineHeight

document.body.clineWidth
document.body.clineHeight

不同浏览器之间对上面的属性定义有差异,无法获取浏览器窗口本身的大小,可以获取页面视口的大小

//窗口可视范围高度
var clientHeight = window.innerHeight || Math.min(document.documentElement.clientHeight, document.body.clientHeight);

调整窗口的大小

window.resizeBy(100, 200);
window.resizeTo(300, 400);

这方法可能被浏览器禁用,不适用框架,只对最外层的window对象有用

(5)导航和打开窗口

window.open('http://ww.wrox.com', 'topFrame', 'height=400,width=300,top=10,left=10')

//window.open(url, 窗口目标,字符串, 布尔值),返回新窗口的引用
//第二参数的值_self,_parent,_top,_blank
//第三参数'fullscreen,height,width,left,location,resizable,scrollbars,status,top,toolbar,menubar'
//第四参数表示新页面是否取代浏览器历史记录中当前加载页面

关闭窗口

window.close()

(6)系统对话框

显示系统对话框,代码停止执行,而关掉这些对话框后代码又恢复执行。系统对象框外观不可以通过css改变。

alert('hello world');
confirm('are you sure?');//返回布尔值
prompt("what's you name?", 'lili'); //null或input的值

查找和打印

window.print()
window.find()

2、location对象

提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能(将URL解析为独立的片段)

不仅是window的属性,还是document的属性

window.location === document.location
//指向同一个对象

(1)查询字符串参数

function getQueryStringArgs(){
    let qs = location.search.length > 0 ? location.search.substring(1) : '';
    let args = {},
        items = qs.length ? qs.split('&') : [];
        name = null,
        value = null;
        
    items.forEach((item)=>{
        let tempItem = item.split('=');
        name = decodeURLComponent(tempItem[0]);
        value = decodeURLComponent(tempItem[1]);
        
        if(name.length){
            args[name] = value;
        }
    });
    return args;
}

(2)位置操作

打开新URL,并在浏览器的历史记录中生成一条记录,通过点击‘后’退按钮都会导航到前一个页面

location.assign('http://www.wrox.com');
location.href = 'http://www.wrox.com';
window.location = 'http://www.wrox.com';
//修改location的其他值,改变当前加载的页面
location.hash = '#search1';
location.search = '?q=js';
location.hostname = 'www.yahoo.com';
location.pathname = 'mydir';
location.port = 8080;

replace方法不生成新记录,用户不能回到前一个页面

location.replace('http://www.wrox.com')

重新定向到http://www.wrox.com,然后‘后退’按钮将处于禁用状态,如果不重新输入完整的URL,则无法返回前一个页面。

reload方法

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

3、navigator对象

识别客户端浏览器的事实标准,通常用于检测显示网页的浏览器类型

(1)检测插件

navigator.plugins

(2)注册处理程序

有兼容性问题

navigator.registerContentHandler(mime类型,URL, 应用程序名称)
navigator.registerProtocolHandler(协议,URL, 应用程序名称)

4、screen对象

浏览器窗口外部的显示器的信息,如像素宽高。

screen.availWidth
等等

5、history对象

从窗口打开的那一刻算起,保存着用户上网的历史记录,但出于安全考虑,无法通过程序获取history对象中的具体信息

history.go(-1);//后退
history.go(1);//前进
history.go(2);//前进两页
histrory.go('wrox.com');//跳转到历史记录中包含该字符串的第一个位置

history.back();
history.forward();
history.length属性

histroy.pushState(stateObj, title, URL);
histroy.replaceState(stateObj, title, URL);

pushState只是在历史记录中增加一条新的记录,把当前页面作为历史的记录保存到history的历史记录中。将当前浏览器的地址栏改为参数url的指定的值,但并不会加载它。这点与普通的通过链接打开或浏览器地址输入url完全不一样。

replaceState只是改变当前页面在history对象中的记录信息。地址栏的地址不断变化,页面内容不变