努力向前 主页分类时间轴友链关于留言板
浏览器BOM核心
|浏览器BOM
字数总计: 3.1k|阅读时长: 11 分钟

window 对象

全局作用域

这个不用多讲，前面已经接触过，所有在全局作用域定义的变量都会被当做 window 对象的属性，同时 Global 对象也是基于 window 对象的。

需要注意的是，一般定义变量时，这个变量的四个数据属性都默认为 true（这个前面面向对象那里讲过），所以都是可以删除或者修改的。可是不一样的地方就在全局作用域，在此作用域下定义的变量的数据属性之一 [[Configurable]]默认为 false，这就导致无法删除，强行使用 delete 是无效的，在 IE9 之前的浏览器中还会报错

总结来说，全局作用域定义的变量无法删除，但是在 window对象及其名下的所有对象中定义的变量是可以删除的。

窗口关系和框架

这里主要是值网页中打开网页用到的框架 frame

  • 每一个 frame 框架都拥有自己的 window 对象
  • 每一个 frame 框架都保存在 frame 集合中，可以通过索引或者框架名字访问该框架的 window 对象
1
2
3
4
5
6
<html>
  <frameset>
    <frame name="1">
    <frame name="2">
  </frameset>
</html>
  • 如上述可通过 window.frames[0] 或者 window.frames[“1”] 来访问

top对象

不过建议使用 top 对象，因为 top 对象始终指向最外层框架也就是浏览器窗口，这样可以保证访问到正确的 frame

  • 例如 top.frames[0] 或者 top.frames[“1”]

parent对象

直接指向本层框架的上层框架

  • 有的时候可能等于 top
  • 在没有框架时始终等于 top，它与 top 也同时等于 window

窗口位置

指的是浏览器相对于屏幕的位置

screenLeft 与 screenTop

分别代表浏览器窗口相对于屏幕左边的距离和上边的距离

  • IE、Safari、Opera、Chrome 都支持该属性，作用相同
  • Firefox并不支持

screenX 与 screenY

分别代表浏览器窗口相对于屏幕左边的距离和上边的距离

  • Firefox、Safari、Chrome 都支持
  • Opera虽然支持这两个属性，但是与上述的 screenLeft 与 screenTop 并不对应，不建议使用在 Opera 中

关于边距的问题

  • 在 IE、Opera 中，screenTop 保存的是最外层 window 对象可见页面的边距，这就导致即使浏览器紧贴屏幕，那么返回的距顶部距离不会是零而是工具栏高度，因为浏览器工具栏不算可见页面。
  • 在 Chrome、Firefox、Safari 中，screenX 或者 screenTop 保存的就是窗口距屏幕的位置，将工具栏也包括在里面

总结，并不是每个浏览器都支持上述方法，另外一点，对于距顶部的距离，有两类情况，一类浏览器认为应该从整个浏览器窗口最外面算起，另一类则认为应该从浏览器中可见页面的边框算起。所以在使用时最好先判断浏览器是否支持在决定取哪一个值（Left和Top或者X和Y）

moveTo() 和 moveBy()

都接受两个参数

  • moveTo(x,y) 表示直接移动到某个坐标(x,y)
  • moveBy(x,y) 表示在水平 y 和垂直 x 方向上移动的像素，x 为负代表往左，反正往右；y 为负代表往上，反正往下。
  • 两个方法只适用于最外层 window 对象

窗口大小

包括四个基本属性

  • innerWidth 和 innerHeight 分别浏览器内页面大小，不算边框和工具栏
  • outerWidth 和 outerHeight 分别为浏览器窗口大小，算边框工具栏
1
2
console.log(window.innerWidth,window.innerHeight);//1054 722
console.log(window.outerWidth,window.outerHeight);//1536 824

clientWidth 和 clientHeight

在标准模式下有效，所以浏览器都支持

  • document.documentElement.clientWidth，页面宽度
  • document.documentElement.clientHeight，页面高度

混杂模式下必须使用 body 来获取，部分移动浏览器也只能用这种方式获取

  • document.body.clientWidth，页面宽度
  • document.body.clientHeight，页面高度

浏览器实现标准不一，模式也不一定统一，还要考虑移动浏览器兼容，所以建议使用前做判断是否存在这个值，没有就换个属性，反正主要就上面两种方式

也可以通过 compatMode 来判断属于那种模式，然后在决定使用哪个属性

1
2
3
4
5
6
7
8
9
10
if(document.compatMode == 'CSS1Compat') {
  console.log('标准模式');
  console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);
}
else {
  console.log('混杂模式');
  console.log(document.body.clientWidth,document.body.clientHeight);
}
//标准模式
//1054 722

reszieTo() 和 resizeBy()

都接受两个参数

  • reszieTo(x,y) 表示直接改变窗口大小为 x,y
  • resizeBy(x,y) 表示在水平 y 和垂直 x 方向改变多少个像素
  • 与之前的 move 方法类似，但是可能被禁用，比如 Opera 和 IE7+ 就直接禁用了
1
2
3
4
5
6
var w = window.open("https://www.baidu.com/","Baidu","height=600,width=300");
w.resizeTo(300,600);
w.resizeBy(50,50);
w.moveTo(400,300);
w.moveBy(20,20);
//将会在屏幕中间位置打开一个长方形大小的窗口

导航和打开窗口

window.open()

window对象中最为常见的方法，在JS代码里面打开网页的最常见的方法。三个参数；

  • 参数1：目标网页的url，要遵循计算机网络规定的 URI 格式，不能只填域名，至少有协议与地址
  • 参数2：指定打开窗口的名字，如果该名字存在，就在已存在的窗口或者框架打开。否则就创建一个新窗口并命名指定的名字
  • 参数3：规定新打开窗口的属性，比如宽高、位置、是否可以拖动浏览器等等，具体参数用时请查表

注意，

  • 参数都为空的情况下，默认打开空白页；
  • 只有参数1或者参数1和参数2同时存在时，那么会打开指定目标窗口，并默认拥有工具栏、地址栏等；
  • 但是指定了参数3就必须指定参数2，如果参数1后面紧跟参数3那么打开的新网页只会是默认样式，你再参数3里面定义的参数是无效的
1
var w = window.open("https://www.baidu.com/","Baidu","width=300,height=200");

close()

仅仅限于用 window.open() 打开的新网页，浏览器的主窗口是无法用代码关闭的，必须由人自己关闭

1
2
3
var w = window.open("https://www.baidu.com/","Baidu","width=300,height=200");
w.close();
//关闭新打开的网页

opener

该属性是用来确定是否用单独线程运行新网页，设置后即表示打开的网页用新进程运行，无需与其他页面（window对象）互相通信，一旦设置就无法恢复了

1
2
3
var w = window.open("https://www.baidu.com/","Baidu","width=300,height=200");
w.opener = null;
//关闭新打开的网页

安全限制

由于打开新网页是如此简单，所以不免有人设置程序，短时间内自动打开许多广告页面，所以许多浏览器都做了限制

  • 比如 IE 不允许弹出的窗口随意拖动至浏览器外，不允许关闭状态栏
  • 比如 Firefox 会强制在弹出窗口中显示地址栏
  • 另外的浏览器甚至规定，在一个页面尚未加载完成时，不允许执行 window.open() 语句，只能通过单击某个浏览器提供的按钮或者敲键盘打开

当然也可以为自己的浏览器安装弹窗屏蔽插件

超时调用和间歇调用

超时调用 setTimeout()

两个参数，参数1位执行代码，使用函数比较好；参数2位延迟时间；

  • 使用 **clearTimeout() 可以清除
1
2
3
4
5
6
7
8
9
10
var t = setTimeout(function() {
  document.write('<h2>Hello World!</h2>');
},2000)
if(t) {
  setTimeout(function() {
    clearTimeout(t);
    console.log("提前清除");//1s 后输出
  },1000);
}
//关闭新打开的网页

间歇调用 setInterval()

参数与超时调用一样，只不过他是每过一段时间就执行一次，直至清除或者页面关闭

  • 使用 clearInterval() 来清除

系统对话框

三大方法 alert() confirm() prompt()

alert()

跳出弹框显示信息，一般只有确定按钮，用户只能查看信息不能做其他请求

1
alert("Hello");

confirm()

跳出弹框信息，并且有确定和关闭两个按钮，点击之后分别会返回 true 和 false

1
2
3
4
5
6
if(confirm("你确定要删除吗？")) {
  alert("删除成功");
}
else {
  alert("取消删除")
}

prompt()

除了 OK 和 Cancel 按钮之外，可以提供文本域。点击关闭会返回 null，点击OK则会返回文本域内容；

该方法接受两个参数，参数1为提示文本，参数二为文本域默认值。

1
2
3
4
5
6
7
var re = prompt("请输入邮箱","Email")
if(re !== null) {
  alert("您的邮箱为：" + re);
}
else {
  alert("您取消了输入");
}

滚动

window 对象还可以控制滚动条的滚动，可以用来做回到顶部效果

scrollBy()

指定滚动多少像素

1
window.scrollBy(0, 300);//向下滚动300像素

scrollTo()

指定滚动到什么坐标

1
window.scrollBy(0, 500);//滚动到坐标（0,300）的位置

location 对象

主要用来保存 URL 中的各项参数信息，比如地址，协议，端口，查询字符串等等；当然该对象也可以直接修改这些参数

它既是 window 对象的一部分，也是 document 对象的一部分

  • hash -> #号键后面的字符
  • host -> 包括服务器地址和端口
  • hostname -> 服务器地址
  • port -> 端口
  • pathname -> 文件路径 /one/two
  • protocol -> 协议
  • search -> 查询字符串

以博主个人博客页面为例

1
2
3
4
5
6
7
//http://www.tzwlink.xyz/detialsart?artId=13002
console.log("协议：",location.protocol);//http:
console.log("服务器地址：",location.hostname);//www.tzwlink.xyz
console.log("端口：",location.port);//
console.log("文件路径：",location.pathname);///detialsart
console.log("查询参数：",location.search);//?artId=13002
console.log("hash参数",location.hash);//

当然对于查询参数较多的情况可以自己编写函数来分解，因为上述的 search 属性是返回拼接后的所有字符串

用来查询

下面例子获取百度热搜榜第一的各项查询参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var query = location.search ? location.search.replace("?","").split("&") : null;
var list = [];
console.log("参数名\t参数内容");
query.forEach((item)=> {
  list = item.split("=");
  console.log(decodeURIComponent(list[0]) + "\t\t" + decodeURIComponent(list[1]));
});
// 参数名	参数内容
// cl		3
// tn		baidutop10
// fr		top1000
// wd		黄河出现2020年第2号洪水
// rsv_idx		2
// rsv_dl		fyb_n_homepage
// hisfilter		1

位置操作

改变 URL 来打开新页面

  • location.assign() 方法
  • location.href
  • window.location

上述第一个方法传入新的 url 作为参数，其余两个则是赋值；最终效果一样

1
2
3
location.assign("http://www.tzwlink.xyz/");
location.href = "http://www.tzwlink.xyz/";
window.location = "http://www.tzwlink.xyz/";

改变 URL 的参数来重定向

凡是修改除 hash 以外的参数都可以重新加载到修改后的页面，每修改一次就会刷新

1
2
3
4
5
//原始地址为 http://www.tzwlink.xyz/
location.pathname = "detialsart";
//跳转至 http://www.tzwlink.xyz/detialsart
location.search = "?artId=13001";
//跳转至 http://www.tzwlink.xyz/detialsart?artId=13001

replace()

这个与 String 里面的那个不同，这个是 location 所具有的。

浏览器每一次跳转，历史记录都会记录，这样点击返回就能回到之前的页面。但是该方法可以不再历史记录中记录，也就导致不能返回至上一个页面。

1
location.replace("http://www.tzwlink.xyz/");

reload()

重新加载页面

  • location.reload() 重新加载，从缓存中
  • location.reload(true) 重新加载，从服务器

navigator 对象

暂时跳过

screen 对象

用处不大，暂时跳过

history 对象

记录着用户上网的记录，但是具体访问过哪些网址，对于开发人员也是屏蔽的，但可以通过一些方法来操作

go()

负数为后退几页，正数为前进几页

1
2
history.go(-2);//后退两页
history.go(1);//前进一页

也可以是传入 URL，它会根据最近访问这个 URL 的时间来跳转，如果没有该方法不执行

back() 和 forward()

前几一页，后退一页

length

该属性如果长度为0则代表是直接打开这个页面的

文章作者: 努力向前
文章链接: https://greatiga.cn/2020/07/20/浏览器/bomCore/
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 努力向前！
window对象