BOM对象 | 易学教程

浏览器对象模型BOM

BOM对象的概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览 器窗口进行互动的对象结构。
BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其 他对象都是该对象的子对象。

BOM对象的核心

BOM的核心对象是window(窗口对象); 
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 
注意：window下一个特殊的属性 window.name

window对象

window对象的五个子对象

 		window是全局对象,很多关于浏览器的脚本设置都是通过它。 
        location则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。 
        navigator中有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象。 
        screen常常用来判断屏幕的高度宽度等。 
        history不太常用，一般应该不会有写关于历史记录的脚本。

window对象常用方法
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口

        //window.open();//无参数，打开一个空白的页面
        window.open("http://www.baidu.com");//有参数，则跳转到相应的网页

close() 关闭当前页面

<input type="button" value="关闭窗口" οnclick="window.close()">

页面加载事件

  window.onload = function () {
            // 当页面完全加载所有内容后执行 
        }

Location 对象
Location对象概念及常用属性 Location对象：用于获取或设置当前页面的URL(统一资源定位符)、

        // location对象的属性 
        console.log(location.href);//返回完整的URL 
        console.log(location.protocol);//返回所使用的Web协议 
        console.log(location.host);//返回主机名返回和端口号 
        console.log(location.hostname);//返回主机名 
        console.log(location.port);//返回端口号 
        console.log(location.pathname);//返回路径和文件名 
        // location对象的方法 
        location.assign('http://www.baidu.com');//加载新的页面 
        location.reload();//重新加载，相当于刷新

Navigator 对象

Navigator对象：包含有关浏览器的信息

        console.log(navigator.platform);//返回运行浏览器的操作系统平台 
        console.log(navigator.userAgent);//返回用户代理信息 
        console.log(navigator.language);//返回操作系统所使用的默认语言

判断当前用户访问的来源

  var str = navigator.userAgent;
        if (str.includes('Mobile')) {
            alert('移动端访问');
        } else {
            alert('电脑访问');
        }

Screen 对象

Screen 对象：包含有关客户端显示屏幕的信息。

        console.log(screen.availWidth);//返回显示器屏幕的宽度 
        console.log(screen.availHeight);//返回显示器屏幕的高度 
        console.log(screen.width);//返回屏幕的宽度（不含任务栏） 
        console.log(screen.height);//返回屏幕的高度（不含任务栏）

History 对象

History 对象：包含用户(在浏览器窗口中)访问过的 URL。

// history对象的属性 
console.log(history.length);//返回浏览器历史记录列表中URL的数量 
// history对象的方法 
history.back();//后退（与浏览器中后退箭头的作用相同） 
history.forward()//前进（与浏览器中前进箭头的作用相同）

来源：CSDN

作者：Surua puoli syd�nt�

链接：https://blog.csdn.net/weixin_46031162/article/details/103977997

标签

bom