BOM的常见用法

最新推荐文章于 2024-06-14 16:21:11 发布

快乐的蜜蜂

最新推荐文章于 2024-06-14 16:21:11 发布

阅读量903

点赞数 2

分类专栏：前端文章标签： BOM的常见用法

本文链接：https://blog.csdn.net/hl971115/article/details/89395284

版权

前端专栏收录该内容

40 篇文章 2 订阅

订阅专栏

对于我前端开发人员来说,BOM的使用还是很常见的,BOM又被称为浏览器对象模型,BOM的核心对象是window,代表的是浏览器的一个实例,好了废话不多少了,我就说说我们常用到的一些例子吧.

一. window 作为全局作用域
let age = 666;
say () {
console.log(“say hello”);
}

console.log(window.age)  // 666
window.say();            // "say hello"

我们定义了一个变量和函数,它都自动归在了window的名下

二. location 对象和 history 对象
// 假如我们的浏览器地址是
http://www.baidu.com:8080/page?a=5#content

// 拿到协议头,这个一般是用来websocket 来判断使用ws 还是wss的,因为https, websocket要wss才可以请求到
console.log(location.protocol);     // http:
// 拿到端口号
console.log(location.port);         // 8080
//拿到不带端口的服务器名称
console.log(location.hostname);     // www.baidu.com
// 拿到url查询的字符串 以? 开头的
console.log(location.search);       // www.baidu.com
// 拿到hash值 以#开头后面的值
console.log(location.hash);         // #content

// 后退一页
history.go(-1); history.back();
// 前进一页
history.go(1); history.forward();
// 跳转到最近的 xxx.com 页面
history.go(“xxx.com”);

三.窗口位置
window.screenLeft 和 window.screenTop 代表的是浏览器的左边位置和上面位置,但是火狐浏览器提供了自己的属性,window.screenX 和 window.screenY两个属性,所以为了兼容性,最好下面这个样子写

let leftPosition = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
let topPosition = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

四.窗口移动
使用moveTo(x, y) 这里是将窗口移动到一个位置,而使用moveBy(left, top) 是接受水平和垂直上的像素

// 将窗口移动到 左上角
window.moveTo(0, 0);
// 将窗口向下移动 100个像素
window.moveBy(0, 100);

//要注意一点 这个方法对框架是没用的,只作用于window对象

五.窗口大小
我们可以使用

  // 我们可以使用以下的属性来获取窗口可视化的宽度和高度,IE9以上可用
   let width = window.innerWidth;
   let height = window.innerHeight;
   // 移动端的IE不支持上面的 属性,提供了下面的方法
   let width = document.documentElement.clientWidth;
   let height = document.documentElement.clientHeight;

   // 如果我们要做兼容性
   let pageWidth = window.innerWidth;
   let pageHeight =  window.innerHeight;
   if (typeof  pageWidth != "number") {
   		   pageWidth = document.documentElement.clientWidth;
   		   pageHeight = document.documentElement.clientHeight;
   }
  // 在chrome 中混杂模式 就需要 document.body.clientHeight; 来获取高度

六. 窗口导航和窗口打开
window.open() 第一个参数是窗口的url地址,第二个是一些参数,例如,
_self,_parent,_blank,_top

window.open(“http://www.baidu.com”, “_blank”, “height: 400px, width: 400px”);

// 窗口的大小
window.resizeTo(500, 500)

七.间歇调用和超时调用
setTimeout(() => {
console.log(“我是3秒后执行”);
}, 3000);

setInterval(() => {
console.log(“我是每隔3秒执行一次”);
}, 3000)

八. 浏览器系统对话
window.alert(“你好呀”);

 let flag = window.confirm("你确认要删除吗?");  // 页面上会弹出一个 确认和取消的按钮
 if (flag) {
	alert("你已经删除了");
 }

// 页面上 输入框
let say = window.prompt("你好呀", "我很好");

九. 如果页面中包含框架,那么每个框架都有着自己的windows对象（frames）

<html>
	<head>
		<title>Frameset Example</title>
    </head>
	<frameset>
		<frame src="frame1.html" name="topname" />
		<frameset>
			<frame src="frame2.html" name="leftname" />
			<frame src="frame3.html" name="rightname" />
		</frameset>
	</frameset>
</html>

我们就可以使用 window.frames[“topname”] 可以来引用上面的的框架啦

可能还会用到
window.navagator 检查浏览器的相关属性,
(其实我们打开google 按下F12 在console里面输入window.navigator 回车就可以看到里面的很多属性了,我平时要查看一些小属性,就可以在Console里面写,很方便的)

我用到的可能就这么多了,有什么问题,欢迎指出哦,一起进步,哈哈哈.