BOM

Posted 2020-07-04 小花喵

【前面的话】BOM全称为Browser Object Model，又称浏览器对象模型。个人认为BOM的知识点比较简单，最广泛的应用要数定时器了，这里也不做过多的介绍，基本上就是一些相关概念的整理。

1、JS中BOM的内容

        1.1 对话框

    ① alert（）； //不同浏览器中的外观是不一样的

    ② confirm（）；

    ③ prompt（）； //不推荐使用

        1.2   ① console.log（）；

                ② document.write()；

2、JS中的顶级对象window

    2.1  所有没有指定对象的 变量和函数，都属于window；【全局变量和函数都属于window对象】

    2.2  window下的属性和方法，写的时候默认可以省略window

3、打开窗口

——window.open（url，target，param）
以下几个方法，如果打开的不是当前网站下的页面，则不起作用
——window.close（）； // 关闭窗口
    win.moveTo(200,200);  //移动到的位置
    win.moveBy(20,20); //  每次移动20,20个px
    win.resizeTo(500.500); //  窗口大小改为500,500个px
    win.resizeBy(50.50); //  窗口大小改为50,50个px变化

 

4、定时器

window.setTimeout(code,delay);  //第一个参数 事件到达之后做的事情        //第二个参数 间隔时间 单位是毫秒
 setTimeout();  //（延迟执行）时间间隔到达只执行一次
 clearTimeout();  //取消定时器
setInterval(); //（定时执行）事件周期性执行，第一次也是等时间到达才会执行
clearInterval();  // 清除定时器

 

5、操作浏览器的地址栏 location

 1 ——location.href  获取或设置地址
 2 function f1() {
 3 // 属性 内部最终会调用assign
 4 // location assign("http://www.baidu.com");
 5 // location.href = "http://www.baidu.com"; //获取或设置地址
 6 // 方法
 7 // location.assign("http://www.baidu.com");
 8 // 替换地址，不会记录历史——后退按钮不能使用
 9 // location.replace("http://www.baidu.com");
10 //刷新
11 location.reload();     
12 }

 

6、onload       //文档在加载完成之后

——使用onload，和代码写在最下面有什么区别？？

    6.1  图片还没有下载完成，就获取宽度，此时宽度是0

    6.2  文档全部（会把文档中所有的外部文件JS,css,图片，都下载完毕）JS特效加载完毕，才会执行

7、navigator  //获取客户端的信息

 //可以获取浏览器和操作系统的信息
console.log(navigator.userAgent); //可以获取操作系统和浏览器的一些信息
console.log(navigator.platform);

 

8、history 历史管理

//需要两个页面进行测试
history.back() //前进
history.forward(); // 后退