BOM
window 对象
通过var声明的所有变量都会变成window对象的属性和方法
window.open()
window.open()
window.open('https://juejin.cn'); //打开一个窗口直接跳转
window.open('https://juejin.cn', 'wroxWindow', 'height=400,width=400,top=10,left=10,resizable=yes');
// 打开400x400像素可缩放的小窗口,离屏幕左边和顶部10px,第二个参数不是已有的参数
- height/width:新窗口的宽高
- left/top:距离屏幕的位置
- resizable:是否可以拖动改变窗口大小 默认为no
window.open()返回一个对新窗口的引用
如果浏览器内置的弹窗屏蔽机制阻止了弹窗,window.open()可能会返回null
需要使用try/catch包装起来
let blocked = false;
try {
let wroxWin = window.open('https://juejin.cn', '_blank');
if (wroxWin == null) {
blocked = true;
}
} catch (ex) {
blocked = true;
}
if (blocked) {
alert('不让弹了~')
}
setTimeout()/setInterval()
区别:
setTimeout():用于指定一段时间后执行某些代码
setInterval():每隔一段时间执行某些代码
- setTimeout()
- 参数:
- 第一个参数:一个函数,或者包含JS代码的字符串;
- 第二个参数:毫秒,也就是说经过多少毫秒后执行这些代码
- JS维护了一个任务队列,并不是说多少毫秒后就一定能执行这段程序,这个毫秒只是将这个程序添加进任务队列中,先进先出
- 如果队列不为空,必须等前面队列中的代码执行完后才能执行
- 参数:
示例:
setTimeout(() => {
alert('掘金大法好~');
}, 3000) //经过3s后弹出,但是不一定是三秒
- clearTimeout() 清除计时任务
let setTime = setTimeout(() => {
alert('掘金大法好~');
}, 3000);
clearTimeout(setTime);
-
setInterval()
-
与setTimeout用相似
-
参数:
- 第一个参数:一个函数,或者包含JS代码的字符串;
- 第二个参数:毫秒,也就是说多少毫秒执行一下这些代码
示例:
setInterval(() => {
alert('掘金大法好~');
}, 3000); //每隔3s弹一次
- clearInterval() 清除定时任务
系统对话框
- alert()
alert() 弹出一个警告框,只有确定这一个选项,接收一个字符串,如果不是字符串调用toString()方法转换为字符串
- confirm()
确认对话框,有确定和取消两个按钮,可以根据点击的不同按钮进行不同的事件操作
- prompt()、
提示框,提示用户输入信息,提示框会有一个文本框,有确定和取消两个按钮。点击确定返回文本框输入的值,取消或者关闭提示框,返回null;
啥也不输返回一个空字符串
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2xv7Bs5z-1608378582219)(E:\Element-UI\img\image-20201219171026950.png)]
location 对象
常用属性
假设当前加载的url是’https://juejin.cn/?sort=three_days_hottest#abc;
属性 | 值(string) | 说明 |
---|---|---|
location.hash | #abc | URL散列值,#后面的值,没有返回空 |
location.host | juejin.cn | 服务器名及端口号(默认80) |
location.hostname | juejin.cn | 服务器名 |
location.href | https://juejin.cn/?sort=three_days_hottest#abc | 完整url |
location.pathname | / | URL中路径名或文件名 |
location.port | 端口号 | |
location.protocol | https: | 页面使用的协议 |
location.search | ?sort=three_days_hottest | URL的查询字符串,这个字符串以?开头 |
location.password | 域名前指定密码 | |
location.origin | https://juejin.cn | URL的源地址 只读 |
操作地址
- assign()
location.assign('https://juejin.cn/');
打开页面会立即跳转,同时在浏览器历史记录中增加一条记录
- replace()
location.replace('https://juejin.cn/');
打开页面跳转 记录不会被添加,浏览器后退按钮无法使用状态
- reload()
location.reload(); //重新加载 不一定从服务器加载
location.reload(true); //重新加载 从服务器加载
navigator 对象
-
由于历史原因,Navigator已经不能识别浏览器了
-
一般只是用userAgent(用户代理)来判断浏览器信息
-
userAgent流失字符串,用来描述浏览器信息的内容,不同的浏览器userAgent不同
var ua = navigator.userAgent;
if(/firefox/i.test(ua)){
alert("火狐");
}else if(/Chrome/i.test(ua)){
alert("Chrome");
}else if(/msie/i.test(ua)){
alert("IE");
}else if("ActiveXObject" in window){
alert("你是IE11");
}
screen 对象
-
这个对象保存的是客户端显示器等一些信息。每个浏览器都会在screen对象上暴露不同的属性
-
这个属性基本是不会被用到
history 对象
导航
- history.go()
- +n 为前进n页 类似浏览器的向前按钮
- -n 为后退n页 类似浏览器的向后按钮
history.go(-2); //向后退两页
history.go(1); //向前进一页
-
history.back() 加载 history 列表中的前一个 URL
-
history.forward(); 可以跳转到下一个页面
history.back();
history.forward();
- history.length 返回历史记录中有多少条记录