前端猿要了解的基本浏览器(BOM)知识

window 对象

全局作用域

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

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

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

窗口关系和框架

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

  • 每一个 frame 框架都拥有自己的 window 对象
  • 每一个 frame 框架都保存在 frame 集合中,可以通过索引或者框架名字访问该框架的 window 对象
<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 分别为浏览器窗口大小,算边框工具栏
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 来判断属于那种模式,然后在决定使用哪个属性

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+ 就直接禁用了
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里面定义的参数是无效的
var w = window.open("https://www.baidu.com/","Baidu","width=300,height=200");

close()

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

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

opener

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

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

安全限制

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

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

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

超时调用和间歇调用

超时调用 setTimeout()

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

  • 使用 **clearTimeout() 可以清除
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()

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

alert("Hello");

confirm()

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

if(confirm("你确定要删除吗?")) {
  alert("删除成功");
}
else {
  alert("取消删除")
}

prompt()

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

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

var re = prompt("请输入邮箱","Email")
if(re !== null) {
  alert("您的邮箱为:" + re);
}
else {
  alert("您取消了输入");
}

滚动

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

scrollBy()

指定滚动多少像素

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

scrollTo()

指定滚动到什么坐标

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

location 对象

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

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

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

以博主个人博客页面为例

//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 属性是返回拼接后的所有字符串

用来查询

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

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 作为参数,其余两个则是赋值;最终效果一样

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

改变 URL 的参数来重定向

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

//原始地址为 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 所具有的。

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

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

reload()

重新加载页面

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

navigator 对象

暂时跳过

screen 对象

用处不大,暂时跳过

history 对象

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

go()

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

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

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

back() 和 forward()

前几一页,后退一页

length

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

本文为原创文章,若文章内容出现抄袭雷同,请联系文章发布人或者网站管理员,我们将认真核实并及时删除。 除非另有说明,否则此博客中的所有文章均根据CC BY-NC-SA 4.0许可。如需转载请标明出处,谢谢配合!

END--感谢阅读

来发表你的感想吧~