首页 > 代码库 > JS知识整理随笔(8) BOM

JS知识整理随笔(8) BOM

 

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:用来识别浏览器名称、版本、引擎以及操作系统等信息内容

 

JS知识整理随笔(8) BOM