关于BOM

简介

BOM（浏览器对象模型）提供了独立于内容而与浏览器窗口进行交互的对象。

DOM和BOM的区别：

BOM：主要用来获取或设置浏览器中的属性和行为。
DOM：主要用来获取或设置文档中的标签属性。

在window中的操作：

注：window里的方法或属性写的时候可以不写window对象。
弹窗操作：

• alert：警告框 alert("弹窗提示内容");
• prompt：带输入框的提示框，点确认返回输入值，为字符串类型。prompt("请输入");
• confirm:信息提示框，返回值为true或false。confirm("确认删除？");

网页打开关闭的方法

open("网页地址","网页名");//打开网页
close();//关闭当前网页

获取用户选择的内容

getSelection();

获取用户非行内样式的方法

getComputedStyle(obj).width;

window中相关尺寸问题

代码	含义
innerwidth	网页可视化区域的宽
innerheight	网页可视化区域的高
screen	对象指屏幕尺寸
screen.availHeight/width	不包含任务栏的高
screen.width/height;	实际宽和高
clientHeight/width;	可视区域宽高，获取不包含边框的宽高
offsetHeight/width;	可视区域宽高，dom元素获取实际宽高

window中的计时器

1、一次性计时器
SetTimeout（）；延迟多久后返回值为数字，单位为ms（毫秒）。

var time=setTimeout(function (){
     console.log(1);
     },1000);//延迟1s执行。
     console.log(time);

setTimeout(showData,1000);
     function showData(){
     console.log(1);
     }

setTimeout("showData()", 1000);
     function showData(){
     console.log(1);
     }

setTimeout(function () {
     console.log(this);//指向window
     }, 1000);

//给计时器传值：计时器调用方法需要传递实参  在计时器的后边直接写值
setTimeout(function (data){
     console.log(data);
     },1000,10);

//做成递归实现循环计时器
var count = 0;
var time;
loadtime();
function loadtime() {
     count++;
     console.log(count);
     if (count > 10) {
    	return;//递归在这里满足条件  直接跳出  也可以用来终止计时器，若是不加return，永远不会停止
    	clearTimeout(time);
//clearTimeout关闭计时器，与return选一个写就行，它的参数必须是由 setTimeout() 返回的 ID 值。
//在创建执行定时操作时要使用全局变量
     }
     time = setTimeout(loadtime, 1000);
     console.log("time:" + time);
}

2、循环计时器
setInterval与一次性计时器的使用方法一致。

    var count=0;
     var time=setInterval(function (){
     count++;
     console.log(count);
     if(count>5)
     {
     clearInterval(time);
     }
     },1000);

3、帧计时器
requestAnimationFrame 时间不可设置。

var count=0;
var time;
loop();
function loop(){
     count++;
     console.log(count);
     if(count>50)
     {
     cancelAnimationFrame(time);//关闭计时器
     return;
     }
     time=requestAnimationFrame(loop);
}

requestAnimation的兼容写法：

var requestAnimation = requestAnimationFrame ||webkitRequestAnimationFrame ||mozRequestAnimationFrame 
 || msRequestAnimationFrame|| function (callback) {
                setTimeout(callback, 1000 / 60);
            }
var cancelAnimation = cancelAnimationFrame ||webkitCancelAnimationFrame ||mozCancelAnimationFrame
|| msCancelRequestAnimationFrame|| function (number) {
                clearTimeout(number);
            }

三者的区别：
requestAnimation在浏览器失去焦点的时候 会自动暂停。
setInterval setTimeout 不会自动暂停。

window的解码转码

btoa转码，atob解码

var str="abc123";
var s=window.btoa(str);
console.log(window.atob(s));

汉字解码转码

window.unescape("张三");//解码
window.escape("张三");//转码

汉字base63位转码解码

//只用来转非ASCII码，非数字和符号。
var s="李四";
    var b64=btoa(encodeURIComponent(s));
    console.log(decodeURIComponent(atob(b64)));

加载完成事件：window.onload=function(){};
浏览器窗口发生变化事件：window.onresize=function(){};
关闭事件：window.onclose=function(){};
滚动条事件：window.onsroll=function(){};window.onmousewheel=function(){};

history历史对象

console.log(history.back());//倒退
history.forward();//前进
//里面的数字代表前进的步数
history.go(1);//前进一步
history.go(-1);//倒退一步

location地址栏对象

相关信息：
location.host主机地址
location.hostname主机名
location.port端口