bom:浏览器是使用对象建立的程序
一,window对象
(1)访问window的属性可以省略window
innerHeight:视口(含滚动条)的高度像素数
innerWidth:视口(含滚动条)的宽度像素数
pageYOffset:文档在窗口中垂直滚动像素数
print():打开打印对话框打印当前文档
scroll(选项):窗口滚动到文档的指定位置
scrollBy(选项):窗口按指定距离滚动文档
(2)定时器
方法 | 含义 |
setTimeout() | 延时执行在指定毫秒数执行1次某段代码 |
setInterval() | 重复执行每隔指定毫秒数执行某段代码 |
function f(){;}
setTimeout(f,500);
setInterval(f,1000);
setTimeout(function(){},500);
setInterval(()=>{},1000)
(3)取消定时器
方法 | 含义 |
clearTimeout(t) | 取消setTimeout()设置的定时器 |
clearInterval(t) | 取消setInterval()设置的定时器 |
let timer1=setTimeout(f,50);
clearTimeout(timer1);
let timer2=setInterval(f,50);
clearInterval(timer2);
二,location地址栏对象
属性/方法 | 说明 |
href | 返回当前URL;设置跳转到新网页URL |
reload() | 重新载入当前网页 |
document.write(location.href);
location.href="http://qq.com";
location.reload();//用缓存刷新
location.reload(true);//服务器获取
三,navigation浏览器对象
(1)获取浏览器的相关信息
online属性:联网返回true,断网返回false
userAgent用于解决存在于某个特定的浏览器的特定版本中的特殊的bug时
var browser=navigator.userAgent;
if(browser.indexOf('Trident')!=-1)
alert
('IE浏览器');
else
alert('非IE浏览器');
(2)剪切板
navigator.clipboard.xx
方法 | 说明 |
writeText(字符串) | 将文本复制到剪贴板 |
readText() | 读取剪贴板中存在的文本 |
navigator.clipboard.writeText('文本');
四,Fullscreen全屏
用于全屏显示某个元素及其后代
属性/方法 | 说明 |
element.requestFullscreen() | 使元素全屏显示 |
document.exitFullscreen() | 使文档退出全屏 |
document.fullscreenElement | 判断文档是否进入全屏模式。值null表示已经进入全屏模式 |
五,Natification通知
当前页面向用户申请本域显示通知的权限
Notification().requestPermission();
产生实例,配置和显示通知
const n=new Notification(title,options);
title是一定会显示的通知的标题
options对象的属性 | 说明 |
body | 通知的正文,显示在标题下 |
icon | 通知里显示图标,图标URL |
六,客户端存储
(1)键值对存储数据,键和值都是字符串
localStorage:长期存储在浏览器
sessionStorage:页面关闭时数据会被清除
(2)localStorage对象
方法 | 说明 |
setItem('key',value) | 新建键值对或者设置键的值 |
getItem('key') | 返回键的值 |
removeItem('key') | 删除键值对 |
clear() | 删除本域的所有键值对 |
localStorage.key;
localStorage.setItem('theme','dark');
localStorage.theme='dark';
localStorage['theme']='dark';