JS知识整理随笔 BOM

Posted 2020-09-28 星河

BOM window 超时调用 间歇调用 页面历史信息 屏幕信息 浏览器信息

 

BOM(browser object model) 浏览器对象模型

BOM 对象

• window
• navigator
• screen
• history
• location
• document
• event

 

 window

window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过javascript访问浏览器的窗口的一个借口，又是ECMAScript规定Global(全局)对象

 

window.alert("content")  显示带有一段消息和一个确认按钮的警告框

window.confirm("message") 显示一个带有指定消息和ok及取消按钮的对话框

返回值(Boolean)

如果用户点击确定按钮，则confirm() 返回true

如果用户点击取消按钮，则confirm()返回false

   var result=window.confirm("hello world");
      if(result){
          alert("你点击了确定")
      }else{
          alert("你点击了取消")
      }

 

 

window.prompt("text,defaultText")

参数说明

text:要在对话框中显示的纯文本（而不是html格式的文本）

defaultText：默认的输入文本

返回值：

如果用户点击提示框的取消按钮，则返回null

如果用户点击确认按钮，则返回输入字段当前显示的文本

      var message=prompt("请输入序号","001")
      console.log(message);

 

window.open(pageURL,name,parameters)

功能：打开一个新的浏览器窗口或查找一个已命名的窗口

参数说明

pageURL:子窗口路径

name：子窗口句柄（name神明了新窗口的名称，方便后期通过name对子窗口进行引用）

parameters：窗口参数（用逗号隔开）

 

window.close(); 关闭窗口

超时调用

setTimeout(code,millisec)

功能：在指定的毫秒数后调用函数或计算表达式

参数说明

code：要调用的函数或要执行的JavaScript代码串

millisec:在执行代码前需要等待的毫秒数

说明

setTimeout()只执行code一次。如果多次调用，可以让code自身再次调用serTineout()

      var fnCall=function(){
            alert(\'world\');
        }
        setTimeout(function(){
          alert(\'hello\');
        },1000)
      
        setTimeout(fnCall,2000);

 

setTimeout方法返回一个ID值，通过它取消超时调用

清除超时调用

clearTimeout(id_of_settimeout)

功能：取消setTimeout()方法设置timeout

参数说明

id_of_settimeout:由setTimeout()返回的ID值，该值标识要取消的延迟执行代码块

 var timeout=setTimeout(function(){
          alert(\'hello\');
        },1000)
        
 clearTimeout(timeout);

 

间歇调用

setInterval(code,millisec)

功能：每隔指定的时间执行一次代码

参数说明

code：要调用的函数或要执行的JavaScript代码串

millisec:周期性执行或调用code之间的时间间隔 以毫秒计

 

 

清除间歇调用

clearInterval(id_of_setinterval)

取消setInterval()方法设置的interval

参数说明

id_of_setinterval：由setInterval()返回的ID值

   var interval=setInterval(function(){
       console.log("hello");
       },1000)
        //10秒之后停止调用
        setTimeout(function(){
        clearInterval(interval);

        },10000)

 

 

 

location

location对象提供了与当前窗口中加载文档有关的信息，还提供了一些导航功能，它既是window对象的属性，也是document对象的属性。

 

location.href

功能：返回当前加载页面完整的URL

说明：location.href与window.location.href等价

 

location.hash

功能：返回URL中的hash（#号后跟零或多个字符），如果不包含则返回空字符串

 

location.host

返回服务器名称和端口号（如果有）

location.hosname

返回不带端口号的服务器名称

location.pathname

返回URL中的目录和文件名

 

location改变浏览器位置

location.href属性

 

location对象其它属性也可以改变URL

location.hash

location.search

 

location..replace()

重新定向URL

使用location.replace不会再历史记录中生成新记录

location.reload()

重新加载当前显示的页面

说明：

location.reload()有可能从缓存在加载

location(true)从服务器重新加载

 

history

保存用户在浏览器中访问页面的历史记录

 

history.back()

回到历史记录的上一步

相当于使用了history.go(-1)

 

history.forward()

回到历史记录的下一步

相当于使用了history.go(1)

 

screen

包含有关客户端显示屏幕的信息

screen.availWidth

返回可用的屏幕宽度

 

screen.availHeight

返回可用的屏幕高度

 

Navigator

Navigtor对象的userAgent属性可以判断

• 浏览器类型
• 设备终端是移动还是PC

 

userAgent：用来识别浏览器名称、版本、引擎以及操作系统等信息内容