【JS】BOM

目录

一、浏览器窗口尺寸

1.显示页面内容的宽高（包括滚动条）

1.window.innerWidth

2.window.innerHeight

 2.显示窗口的整体宽高（包含标签、地址栏、菜单栏、侧边栏、控制台...）

1.window.outerWidth2.window.outerHeight

二、获取浏览器信息 

1.window.navigator

三、地址栏操作

1.window.location.href = "地址" 地址跳转

 2.window.location.assign("地址") 地址跳转

 3.window.location.reload() 刷新页面

四、浏览器历史记录

1.window.history 历史记录

2. window.history.forward() 历史前一页

3. window.history.back() 历史后一页

4.window.history.go() 历史页面前进\后退（负数）多步

五、浏览器参见事件

1.window.onresize 响应窗口缩放事件

 

 2.window.onscroll   当页面滚动时输出信息  

ps:scrollX、scrollY为只读不可以修改赋值 

3.window.onload 页面资源加载完成时回调

六、页面弹出层（弹框？）

1.window.alert 警告框

2.window.confirm   确认会话框 (返回：true/false)

3.window.prompt 命令提示符会话框(输入）

七、打开和关闭窗口

  1.window.open('地址') 在跳转链接的时候打开一个新的浏览器窗口

2.window.close()  关闭浏览器当前窗口

---

一、浏览器窗口尺寸

1.显示页面内容的宽高（包括滚动条）

1.window.innerWidth

2.window.innerHeight

    $Element.innerText = window.innerWidth
    $Element.innerText = window.innerHeight

 2.显示窗口的整体宽高（包含标签、地址栏、菜单栏、侧边栏、控制台...）

1.window.outerWidth
2.window.outerHeight

    $Element.innerText = window.outerWidth
    $Element.innerText = window.outerHeight

二、获取浏览器信息 

1.window.navigator

三、地址栏操作

1.window.location.href = "地址" 地址跳转

//打印地址 
console.log(window.location.href);

 btn.onclick = function () {
    window.location.href = "http://www.baidu.com"
}

 2.window.location.assign("地址") 地址跳转

 btn.onclick = function () {    
    window.location.assign("http://www.163.com")
}

href、assign都可以用来跳转页面，只是用法不同

 3.window.location.reload() 刷新页面

 btn.onclick = function () {    
    window.location.reload()
}

四、浏览器历史记录

1.window.history 历史记录

    console.log(window.history);

2. window.history.forward() 历史前一页

  // ·点击按钮前进
        btnForward.onclick = function () {
            window.history.forward()
        }

3. window.history.back() 历史后一页

  btnBack.onclick = function () {
            window.history.back()
        }

4.window.history.go() 历史页面前进\后退（负数）多步

  // 一次前进/后退多步
        btnGo.onclick = function () {
            window.history.go(2)//前进两步
            window.history.go(-2)//后退两步
        }

五、浏览器参见事件

1.window.onresize 响应窗口缩放事件

监听窗口行为，当浏览器窗口被缩放时会执行javascript代码

 window.onresize = function () {
            console.log(window.innerWidth, window.innerHeight);
            console.log("窗口被缩放了")
        }

 2.window.onscroll   当页面滚动时输出信息  

  监听滚动条行为，当滚动条变化时会执行javascript代码

 window.onscroll = function () {
            console.log("有人在拨弄滚动条");
            // 水平滚动的距离 垂直方向滚动的距离
            console.log(window.scrollX, window.scrollY);                                          
        }

ps:scrollX、scrollY为只读不可以修改赋值 

3.window.onload 页面资源加载完成时回调

使用此BOM可以将Javascript代码写在body前

window.onload = function () {
            console.log("window.onload 页面资源加载完成");

        }

六、页面弹出层（弹框？）

1.window.alert 警告框

    btnAlert.onclick = function(){
        window.alert("警告框")
            }

2.window.confirm   确认会话框 (返回：true/false)

    当点击确定的时候会返回true

    btnConfirm.onclick = function(){
        // 确定则返回true 否则返回false
         var baidu= window.confirm("跳转百度吗")
            if(baidu){
                window.location.href="https://www.baidu.com/";
           }
            }

3.window.prompt 命令提示符会话框(输入）

    btnPrompt.onclick = function(){
        // 捕捉用户的输入
        var userInput = window.prompt("请输入")
        console.log(userInput);
            }  

七、打开和关闭窗口

  1.window.open('地址') 在跳转链接的时候打开一个新的浏览器窗口

  类似于 target:"_blank" 打开一个新窗口 而href、assgin是在当前页面打开

    btn1.onclick = function () {
      window.open('https://www.baidu.com')
    }

2.window.close()  关闭浏览器当前窗口

    btn2.onclick = function () {
      window.close()
    }