浏览器1. 获得浏览器窗口的尺寸 2. 浏览器的window.location属性 3. 浏览器的window.onlo

1. 获得浏览器窗口的尺寸

    console.log(window.innerHeight,innerHeight) (window可省略）测量宽度
    console.log(window.innerWidth,innerWidth) 测量高度

2. 浏览器的window.location属性

// window.location.href 网页的地址
console.log(window.location.href)
// location.reload 刷新
<body>
    <button id="btn1">刷新</button>
    <script>
        btn1.onclick = function(){
            location.reload()
        }
        </script>
</body>

3. 浏览器的window.onload属性

//   window.onload  (页面的所有资源加载完之后执行 （图片，视频）)

3. 浏览器的window.document属性

// document.documentElement.scrollTop (轮动距离) （上下）
        console.log(document.documentElement.scrollTop)  // 0 
        window.onscroll = function(){
            console.log(document.documentElement.scrollTop)
        } // 随着滚动不断刷新
// document.documentElement.scrollLeft (滚动距离）（左右）       
        console.log(document.documentElement.scrollLeft) // 0 
        window.onscroll = function(){
            console.log(document.documentElement.scrollLeft)
        } // 随着滚动不断刷新

// 技巧 去到网页中的某个固定页面
    <button id="dut">回到首页</button>
    <script>
        dut.onclick = function(){
            // window.scrollTo(0,0)
            // // 两个数字 行，列

            window.scrollTo({
                top:0,
                left:0
            })
        }
    </script>

4. 浏览器的window.open()/close()属性

    <button id="dut1">open</button>
    <button id="dut2">close</button>
    <script>
        dut1.onclick = function(){
            window.open("https://www.baidu.com/")  （打开一个网页）
        }
        dut2.onclick = function(){
            window.close()  （删除当前网页）
        }
    </script>

5.浏览器的history属性

    <button id="dut1">返回</button>
    <button id="dut2">前近</button>
    <script>
        dut1.onclick = function(){
            history.back()
        }
        dut2.onclick = function(){
            history.forward()
        }
    </script>
    
 // history.go() 控制网页的前进和后退
        <button id="dut1">go</button>
        dut1.onclick = function(){
            history.go(数字)
            // 数字1代表前进一个网页，-1代表后退一个网页
        }

6.浏览器的本地存储和云端存储

JA4H2JME{Y}RO~EJYW)Z}GE.png

 <script>
 // localStorage (永久存储) sessionStorage (暂时存储)
        localStorage.setItem("名字","数值")  //只能存字符串
        localStorage.getItem("名字")
        localStorage.removeItem("名字")
        localStorage.clear()
        
        // 存储字符串
        localStorage.setItem("obj",JSON.stringify({name:"zcw",age:100}))
        console.log( JSON.parse(localStorage.getItem("obj")))
    </script>