【JavaScript】原生js中BOM的应用

打开、关闭窗口

window.open

    window.onload = function(){
        var oBtn = document.getElementById('btn1')
        var oTxt = document.getElementById('txt1')
        oBtn.onclick = function(){
            var oWin = window.open("about:blank","_blank") //网址、打开方式，新打开的窗口会返回新的 window 对象
            oWin.document.write(oTxt.value)
        }
    }

window.close

onclick="window.close()" //低版本浏览器 window.close 只能关闭 window.open 的页面

window.navigator.userAgent

当前终端的版本信息

window.location

当前页面地址

window.location = 'http://www.baidu.com' //可以赋值，当前页面会跳转
alert(window.location) //可以获取当前地址

 可视区、滚动距离

    window.onload = function(){
        var oBtn = document.getElementById('btn1')
        oBtn.onclick = function(){
            alert('宽：' + document.documentElement.clientWidth + '\n高：' + document.documentElement.clientHeight)
        }   
    }

可视区大小和页面大小无关，与窗口大小有关

document.onclick = function(){
    alert(document.documentElement.scrollTop)
    //alert(document.body.scrollTop) 低版本谷歌支持，高版本不支持
}

 实例：悬浮框

    window.onscroll = window.onresize = function(){ //滚动和窗口变化时
        var scrollTop = document.documentElement.scrollTop
        var oDiv = document.getElementById('div1')
        oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop + 'px'
    }