BOM 对象

什么是BOM

DOM(Document object Model)是一条操作HTML标签的API(application programing interface)

BOM(BOM object Model)是一条操作浏览器API(接口/方法/属性)

常见的BOM对象

window:代表整个浏览器窗口(window是BOM中的一个对象,并且是顶级对象)

Navigator:代表浏览器当前的信息,通过Navigator我们可以获取用户当前使用的是什么浏览器(使用何种操作系统)

获取浏览器信息

var user_agent=window.navigator.userAgent;
if(user_agent.indexOf('Firefox')!=-1){
    lert('火狐浏览器')
    }else if(user_agent.indexOf('Chrome')!=-1){
    alert('谷歌浏览器')
}else if(user_agent.indexOf('msie')!=-1){
    alert('Ie浏览器')
}

navigator属性

    var navObj = window.navigator;
    // 浏览器的代码名
    var appCodeName = navObj.appCodeName;
    // 浏览器的名称
    var appName = navObj.appName;
    // 浏览器的平台和版本信息
    var appVersion = navObj.appVersion;
    // 浏览器的语言
    var language = navObj.language;
    // 浏览器的是否启用cookie
    var cookieEnabled = navObj.cookieEnabled;
    // 运行的浏览器的操作系统平台
    var platform = navObj.platform;
    // 客户机发送服务器的user-agent 头部的值
    var userAgent = navObj.userAgent;

location:代表浏览器当前的地址信息，通过location对象我们可以获取或者设置当前的地址信息

window.location 对象属性

    // 设置或返回从(#)好后面的URL(锚)
    var hash = location.hash;
    // 设置或返回主机名和当期的URL端口号
    var hosr = location.host;
    // 设置或返回当期的URL端口号主机名
    var hostname = location.hostname;
    // 设置或返回当期的URL端口号
    var port = location.port;
    // 设置或返回当期的URL的路径部分
    var pathname = location.pathname;
    // 设置或返回当期的URL协议名称
    var protocol = location.protocol;
    // 设置或返回当期的URL从？开始的URL参数信息(页面传参)
    var search = location.search;

window.location 对象提供的方法

    // 重新加载当期那文档
    /*<div class="btn">重新加载</div>*/
    var btn = document.querySelector('.bnt');
    btn.onclick = function() {
        location.reload();
    }
    // 将现有文档替换为指定的新的文档
    /*<div class="btn">重新加载</div>*/
    var btn = document.querySelector('.bnt');
    btn.onclick = function() {
        location.replace("文档的地址");
    }
    // 重新加载当期文档
    var btn = document.querySelector('.bnt');
    btn.onclick = function() {
        location.assign('文档的地址');
    }
    // location对象中的replace 函数和assign方法的区别:assign方法调用后悔将当前地址储存在history对象中(我们可以后退)，replace则不行

History:代表浏览器的历史信息,通过Hostory我们可以实现上一步/下一步/刷新(处于对用户隐私考虑,我们只能拿到当前的浏览记录，不能拿到首页历史信息)

History对象

    History对象包含用户(在浏览器窗口中)访问过的URL
    length 返回浏览器历史列表中的url数量
    // 方法：
    back()  前一个URL地址
    forward()  下一个 URL地址
    go()  加载History列表中的某个具体页面

Screen:代表用户的屏幕信息

Screen对象

    // 除windows任务栏之外 屏幕的宽高
    // 屏幕的宽度：
    var availHeight = screen.availHeight;
    var availWidth = screen.availWidth;
    console.log(availWidth, availHeight);
    // 屏幕的宽高：
    var screenWidth = screen.width;
    var screenHeight = screen.height;
    console.log(screenWidth, screenHeight);

最后编辑于：2021.01.21 10:49:53