一、BOM操作
1、简述:Browser Object Model,即用JS代码控制浏览器的相关操作。
2、window对象(窗口对象)的操作:
window.innerHeight; // 查看当前窗口高度 // ===> 850 window.innerWidth; // 查看当前窗口宽度 // ===> 1440 window.open('https://www.baidu.com/','','height=400px,width=400px,top=400px,left=400px'); // 新建窗口打开一个页面,第一参数是url,第二个参数写空,第三个参数设置新建窗口的大小和位置 // 新建的窗口是当前窗口的子窗口,父子窗口之间可以通过window.opener()通信 window.close(); // 关闭当前窗口
3、window子对象的操作:调用时可以不写前缀window,为了意义明确,推荐写全。
4、window.navigator对象(浏览器对象)的操作:
window.navigator.appName; // 查看当前浏览器名称 // ===> "Netscape" window.navigator.appVersion; // 查看当前浏览器版本 // ===> "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36" window.navigator.userAgent; // 标识当前是否是浏览器访问,一般用于反爬虫 // ===> "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36" window.navigator.platform; // 查看当前所处平台 // ===> "Win32"
5、window.history对象(回访对象)的操作:
window.history.back(); // 回退到上一页 window.history.forward(); // 前进到下一页
6、window.location对象(坐标对象)的操作:
window.location.href; // 获取当前页面的url // ===> "http://localhost:63342/week12-day01/03%20%E5%8D%9A%E5%AE%A2%E6%95%B4%E7%90%86/00.html?_ijt=4pa7c1ico8k5b7n99glgif7svc" window.location.href = 'http://www.baidu.com/'; // 跳转到指定页面 window.location.reload(); // 刷新当前页面
7、设置弹出框:
①警告框:有提示信息与确认按钮。
<script> alert('欢迎来到本页面') </script>
②确认框:有提示信息与确认/取消按钮。
<script> confirm('是否确认如此操作?') </script>
③互动框:有提示信息与可输入框还有确认/取消按钮。
<script> prompt('请输入您的编号:') </script>
<script> prompt('请输入您的编号:', '可以设置默认值') </script>
8、设置计时器