window BOM 根节点

        location

        history

        screen

        navigator

        document

打开新的窗口

 open("http://www.163.com","网易","width=300,height=300")

 close()

 

视口宽高==html的clientWidth和clientHeight

console.log(innerWidth,innerHeight);//不考虑滚动条

        console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);//会减去滚动条

     

视口宽高和控制面板的宽高之和

console.log(outerWidth,outerHeight)

    

这两个值是相同的，都是指当前窗口距离屏幕左上角的坐标位置

console.log(screenLeft,screenTop)

console.log(screenX,screenY)   

页面的重载

 location.reload()

 location.href

 location.assign()

 location.replace()   

当页面没有第一次渲染完成前，他们三个都是跳转页面的作用，功能一样

 document.οnclick=function(){

            // location.href="http://www.163.com"  //产生历史记录,可以获取当前页面的地址，可以设置跳转页面的地址

            // location.assign("http://www.163.com")  //产生历史记录,只能设置跳转页面的地址

            // location.replace("http://www.163.com")  //不产生历史记录

        }

        location.hash  地址栏中#后面的内容

        location.search  地址栏中？后面的内容

        location.hash  地址栏中#后面的内容

        location.search  地址栏中？后面的内容

      

如果有hash，hash必须写在search后面

console.log(location.hash)

        console.log(location.search)

         document.οnclick=function(){

                可以赋值产生新的历史记录的

                location.hash="#a";

            }

          

用来分解地址栏中地址

console.log(location.hostname)//域名

console.log(location.port)//端口号

console.log(location.protocol)//协议

console.log(location.pathname)//路径

        

screen  屏幕          

下面两个都是屏幕宽高

  console.log(screen.availWidth,screen.availHeight);//去掉附件（任务栏）屏幕宽高

  console.log(screen.width,screen.height);//屏幕宽高

  //navigator

  console.log(navigator.userAgent)//浏览器版本及内核

 跳转历史记录，如果0就是刷新页面，如果是1就是向前跳转，

如果是-1就是向后跳转，数字代表跳转几个历史

        history.go(1)

        history.back(); 后退  go(-1)

        history.forward();前进  go(1)

  var bns=Array.from(document.querySelectorAll("button"));

        for(var i=0;i<bns.length;i++){

            bns[i].οnclick=function(){

                var index=bns.indexOf(this);

                if(index===0){

                    location.hash="#a";

                }else{

                    history.go(-1);

                }

            }

        }

     

历史记录的数量

        console.log(history.length)

添加历史记录

        history.pushState({a:1},"data","#a")

  

如果改变历史记录时，触发这个事件，监听浏览器历史记录跳转

window.onpopstate=function(){

            console.log(history);

        }

        SSR   Server Side Render

        CSR   Client  Side  Render