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

努力的Greatiga

发布于 2022-07-25 02:18:06

90600

代码可运行

文章被收录于专栏：前端开发与网站建设前端开发与网站建设

运行总次数：0

代码可运行

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则代表是直接打开这个页面的

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

php

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

php

编程算法

登录后参与评论

0 条评论

热度

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

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

window 对象

全局作用域

窗口关系和框架

top对象

parent对象

窗口位置

screenLeft 与 screenTop

screenX 与 screenY

关于边距的问题

moveTo() 和 moveBy()

窗口大小

clientWidth 和 clientHeight

reszieTo() 和 resizeBy()

导航和打开窗口

window.open()

close()

opener

安全限制

超时调用和间歇调用

超时调用 setTimeout()

间歇调用 setInterval()

系统对话框

alert()

confirm()

prompt()

滚动

scrollBy()

scrollTo()

location 对象

用来查询

位置操作

改变 URL 来打开新页面

改变 URL 的参数来重定向

replace()

reload()

navigator 对象

screen 对象

history 对象

go()

back() 和 forward()

length

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐