BOM

BOM

BOM概念

BOM(browser Object model),译为浏览器对象模型。JavaScript会把浏览器的一个标签页(即网页)作为一个对象存于程序中,提供了一系列API来操作标签页,比如新建或关闭标签页、跳转页面、前进或后退等功能。

类似于DOM核心是document对象,BOM也是有一个核心对象window。BOM相关的API是由window对象提供。

window对象概念

widow对象是每一个页面都会有的对象,由JavaScript程序自动生成,每个页面的window对象是不一样的。window对象提供了用于操作本页面所需的所有API。值得一提的是,document对象实际上是作为window对象的一部分的。

window对象API

  • alert

  • prompt

  • confirm:页面上弹出一个确认框,点击确定返回true,否则返回false。

  • open:新建一个页面。不推荐使用,受浏览器的安全机制影响,可能无法执行。

  • close:关闭当前页面。

  • setInterval

  • setTimeout

  • clearInterval

  • clearTimeout

  • innerWidth&innerHeight:用于获取页面窗口的宽度和首屏高度。

  • outerWidth&outerHeight:用于获取页面窗口的宽度和整个标签页窗口的高度(即innerHeight+浏览器的工具栏高度)。

    //close
    var result = confirm('确定是否关闭页面');
    window.close();//关闭当前页面
    
    //open 
    window.open("网页地址", 打开方式, "窗口的基本配置字符串");
    //例子:新页面打开百度首页,宽高300,距离浏览器顶部和左边100px
    window.open("http://www.baidu.com", '_blank', "width=300, height=300, top=100, left=100");
    
    // innerWidth innerHeith 
    console.log(innerWidth ,innerHeight);
    

BOM四大内置对象

location

属于window对象,location本身也是一个对象,内置了一些API能够实现刷新、跳转页面等功能,同时能够获取页面地址。

常用API:

  • location.host:获取页面地址中的主机地址

  • location.port:获取页面地址中的端口号

  • location.protocol:获取页面地址中的协议名称

  • location.hostname:获取页面地址中的ip地址

  • location.search:获取页面地址中的 数据

  • location.href:获取页面的完整地址

  • location.assign():跳转到指定的页面,新建一条历史记录

  • location.replace():跳转到指定的页面,替换当前历史记录,无法后退到上一步

  • location.reload():刷新当前页面

    //例子:http://127.0.0.1:5500/week4/day02/05-location.html?name=zs&age=12&sex=man
    console.log(location.host);//127.0.0.1:5500
    console.log(location.port);//5500
    console.log(location.protocol);//http:
    console.log(location.hostname);//127.0.0.1
    console.log(location.search);//?name=zs&age=12&sex=man
    console.log(location.href);//整个地址
    
    //跳转
    location.assign("要跳转的页面地址")
    location.replace("要跳转的页面地址")
    location.href = "要跳转的页面地址";
    
    //刷新
    location.reload();
    
    • 基本上只能够使用,除了href外不能修改。

history

提供了页面前进或后退的api,能够实现页面的前进或后退。

  • go(数字):根据数字的正负来确定是前进还是后退指定的页数。go(-1)表示后退一页,go(1)表示前进一步。

  • forward():前进一页。

  • back():后退一页。

    window.history.go(-1);
    等同于 history.go(-1);
    history.forward();
    history.back();
    

收集与浏览器本身相关的信息,比如浏览器版本,当前操作系统的版本等。配合正则表达式,能够判断当前用户使用的浏览器版本以及是否为移动端,方便切换PC端页面或移动端页面。

  • userAgent:返回浏览器的版本信息

    navigator.userAgent
    

screen

收集屏幕的相关信息,比如是否横屏、色彩之类的。HTML5针对screen新增了orientation来获取屏幕的角度信息,竖屏模式角度返回0,横屏返回90。

console.log(screen);
//显示当前屏幕旋转的角度
console.log(screen.orientation.angle);// 竖屏:0 横屏:90

定时器

JavaScript提供了两个API来实现在一段时间之后执行指定的JavaScript代码的功能,根据指定js代码是否重复执行分为两种定时器:延时定时器以及间隔定时器。

延时定时器

  • setTimeout:指定一段时间之后执行一次指定的 JavaScript代码。

    setTimeout(function(){
        延时执行的js代码
    },延时时间);
    

    延时时间以毫秒为单位

  • clearTimeout:终止定时器的执行

    clearTimeout(延时定时器的标识符);
    

    定时器的标识符指的是定时器的id,表示要暂停哪个定时器,定时器的标识符可以通过setTimeout的返回值来得到。clearTimeout是定时器执行之前使用,如果定时器执行后clearTimeout是无效的。

间隔定时器

  • setInterval:能够实现每隔一段时间都会执行一次指定的代码。

    setInterval(function(){
        每隔一段时间要执行的js代码
    },间隔时间);
    

    间隔时间以毫秒为单位

  • clearInterval:用于停止间隔定时器

    clearInterval(间隔定时器的标识符);
    
  • 如果不清除定时器就新增同样的定时器,则这些定时器就会叠加,反应为执行代码频次增加(像分时复用一样),所以在新增定时器时记得清除旧定时器。

posted @   AncilunKiang  阅读(51)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示