JSBOM

一、获取浏览器窗口的尺寸

·innerHeight和innerWidth

·这两个方法分别是用来获取浏览器窗口的宽度和高度（包含滚动条的）

console.log(window.innerHeight,innerHeight);//window可以省略
console.log(window.innerWidth,innerWidth);

二、浏览器的弹出层

1.alert 是在浏览器弹出一个提示框

2.confirm 是在浏览器弹出一个询问框

3.prompt 是在浏览器弹出一个输入框  

window.alert('我是一个提示框')；
var boo = window.confirm('我是一个询问框')
console.log(boo)；//确定：true / 取消：false；
var str = window.prompt('请输入内容')
console.log(str);//确定:输入的内容 / 取消:null;

三、浏览器的地址信息

a.在 window 中有一个对象叫做 location;

b.就是专门用来存储浏览器的地址栏内的信息的;

 location.href    //地址

//`location.href` 这个属性存储的是浏览器地址栏内 `url` 地址的信息
console.log(window.location.href);//地址  window可以省略
//`location.href` 这个属性也可以给他赋值
window.location.href = './index.html';
btn.onclick = function(){
    location.href = 'http://www.baidu.com';
}//点击跳到百度

 location.reload() 这个方法会重新加载一遍页面，就相当于刷新是一个道理

location.reload();   //刷新       注意： 不要写在全局，不然浏览器就会一直处在刷新状态

btn.onclick = function(){
    location.reload();
}//点击刷新

四、浏览器的历史记录

window 中有一个对象叫做 history;   专门用来存储历史记录信息的

history.back   用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的 ⬅️ 按钮

//前提是你要有上一条记录，不然就是一直在这个页面，也不会回退
window.history.back();

 history.forword 去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的 ➡️ 按钮

//前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个
window.history.forward()

history.go(num);//参数为num,前往num个页面;

btn3.onclick = function(){
    history.back();
    history.go(-1);//回到上一页
}

五、浏览器的常见事件：onload事件/onresize事件/onscroll事件

onload事件: 页面所有资源加载完毕后执行(图片、视频、dom节点);

window.onload = function(){
    //页面所有的资源都加载完毕后执行(图片、视频、dom节点)
    console.log('加载完成');
}

 onresize事件  窗口大小改变会执行里面的代码

window.onresize = function(){
    console.log('resize');
}

 onscroll事件   滚动条滚动一定距离执行函数

window.onscroll = function(){
    console.log('scroll','滚动距离达到指定距离了吗？');
}

六、浏览器的onscroll事件和滚动的距离

window.onscroll = function(){
    // console.log(document.documentElement.scrollTop);//比较新，就浏览器可能不兼容
    // console.log(document.body.scrollTop);//兼容性比上面好
    //可以和写成这种、兼容性
    console.log(document.documentElement.scrollTop || document.body.scrollTop);
    if ((document.documentElement.scrollTop || document.body.scrollTop)>500) {
        console.log('显示回到顶部按钮');
        btn.style.display = 'block';
    }else{
        console.log('隐藏回到顶部按钮');
        btn.style.display = 'none';
    }
}
//回到顶部
btn.onclick = function(){
    //1.两个数字
    window.scrollTo(0,0)//参数1：top 参数2：left
    //2.对象写法
    window.scrollTo({
        top:0,
        left:0
    })
}

七.浏览器打开标签页

window.open("") 打开新的标签页

btn1.onclick = function(){
    window.open("http://www.baidu.com");
}

window.close() 关闭自己标签页

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

八.浏览器的本地存储

a.localStorage:永久存储

存，只能存字符串，不能存对象
//增、存，只能存字符串，不能存对象 可以使用JSON格式字符串
localStorage.setItem("name","kerwin");
localStorage.setItem("obj",JSON.stringify({name:"kerwin",age:100}));
//取
localStorage.getItem("name");
console.log(JSON.parse(localStorage.getItem("obj")));
//删
localStorage.removeItem("name")
//清空
localStorage.clear()

b.sessionStroage：会话(临时)存储  /*关闭页面就丢失*/;

//增、存，只能存字符串，不能存对象
sessionStorage.setItem("name","kerwin");
sessionStorage.setItem("age","100");
sessionStorage.setItem("age","200");//改
sessionStorage.setItem("obj",JSON.stringify({name:"kerwin",age:100}));
//取
sessionStorage.getItem("name")
//删
sessionStorage.removeItem("name")
//清空
sessionStorage.clear()