js红宝石第十二章-BOM

最新推荐文章于 2024-05-15 20:43:52 发布

hlyxsky

最新推荐文章于 2024-05-15 20:43:52 发布

阅读量39

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_60599861/article/details/131619243

版权

12.1 window对象

BOM的核心是window对象

window对象有两重身份:ECMAScript中的Global对象;浏览器窗口的JavaScript接口

12.1.1 Global作用域

window对象被复用为Global对象,因此通过var声明的所有全局变量和函数都会成为window对象的属性和方法

      var num = 100

      function sayHi(){
        console.log('hi');
      }

      console.log(window.num);// 100
      window.sayHi()// hi

12.1.2 窗口关系

top对象始终指着最外层窗口,即window

parent对象始终指着当前窗口的父窗口

self对象就是window对象,为了保持top和parent保持一致

12.1.3 窗口位置和像素比

可以使用moveTo()和moveBy()两个方法移动窗口

moveTo()是要移动到的x和y

moveBy()是相对当前需要移动的x和y

12.1.4 窗口大小

outerHeight outerWidth 返回浏览器窗口自身大小

innerHeight innerWidth 返回页面视口的大小

document.documentElement.clientWidth 和 document.documentElement.clientHeight返回页面视口的大小

可以用resizeTo() 和 resizeBy() 调整窗口大小

12.1.5 视口位置

查看文档相对于视口的滚动距离:

window.pageXOffset/window.scrollX 和 window.YOffset/window.scrollY

可以用scroll() scrollTo() scrollBy() 滚动当前页面

这几个方法除了接受两个数字型之外,还可以接受ScrollToOption字典,通过behavior属性来告诉浏览器是否平滑移动

      window.scrollTo(100,100) // 直接接受参数

      window.scrollBy({
        left: 100,
        top: 100,
        behavior: 'smooth'// 平滑移动 auto自动
      })

12.1.6 导航与打开新窗口

1.弹出窗口

windo.open()可以导航到指定url

第一个参数是URL

第二个参数是目标窗口类似<a>中的target属性

第三个参数是特性字符串

可以用window.close()关闭窗口,但是只能关闭window.open()打开的窗口

新创建的window对象有opener对象,指向打开它的窗口

      let worxWin = window.open(
        'http://www.baidu.com',
        'wroxWindow',
        'height=400,width=400,top=10,left=10,resizable=yes'
      )

      alert(worxWin.opener === window) // true

2.安全限制

默认情况下浏览器会阻止弹出窗口

其他限制根据浏览器而异

3.弹窗屏蔽程序

当弹窗被屏蔽时,window.open()会返回null

4.定时器

setTimeout() 用于在一段时间后执行某事

setInterval()用于指定每隔一段时间执行某事

接受的参数:要执行的代码(可以是包含js的字符串,或者是一个函数),等待的时间

调用setTimeout()时,会返回一个标识ID,在到期前可以用clearTimeout(id)取消定时器

      let timeoutId = setTimeout(() => console.log(100),1000)
      clearTimeout(timeoutId)

一般来说,最好不使用setInterval(),因为退出程序可能被跳过,就会一直占用内存

可以使用setTimeout()替代

      let num = 0
      let maxNum = 100
      let increaseNumber = function() {
        num++;

        if(num<maxNum){
          setTimeout(increaseNumber,500)
        } else {
          alert("Done")
        }
      }

      setTimeout(increaseNumber,500)

12.1.8 系统对话框

使用alert() confirm() prompt() 方法,可以让浏览器调用系统对话框向用户显示消息

这些对话框都是同步模拟的对话框,在它们弹出时,代码会停止执行,直到消失

alert()警告对话框参数是显示的内容,按钮只有OK

confirm() 确认框,有两个按钮,会返回true/false

prompt() 提示框,用户可以输入信息,会作为返回值;若点击取消则会返回null

js还可以显示两种对话框:window.print()打印对话框和window.find()查找对话框;这两种对话框很难利用

12.2 location对象

它是window的属性,也是document的属性,因此window.location和document.location指向同一个对象

location对象的内容p372

12.2.1 查询查询字符串

      let getQueryStringArgs = function(){
        // 取得没有?开头的查询字符串
        let qs = (location.search.length > 0 ? location.search.substring(1) : "")
        args = {}

        // 把每个参数添加到args
        for(let item of qs.split("&").map(kv => kv.split("="))){
          let name = decodeURIComponent(item[0]),
          value = decodeURIComponent(item[1])

          if(name.length) {
            args[name] = value
          }
        }

        return  args
      }

或者可以使用URLSearchParams

      let qs = "?q=javascript&num=10"

      let searchParams = new URLSearchParams(qs)

      for(const param of searchParams){
        console.log(param);
      }