9.2 BOM对象

ECMAScript + BOM + DOM

BOM(Browser Object Model)浏览器对象模型 BOM 使 JavaScript 有能力与浏览器"对话" BOM尚无正式标准,但是浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性(window)

window对象

  • 表示浏览器窗口,所有浏览器都支持 window 对象

  • 所有 JavaScript 全局的对象、函数以及变量均自动成为 window 对象的成员[属性和方法]

  • 全局变量是 window 对象的属性

  • 全局函数是 window 对象的方法

  • window对象是BOM模型中的顶层对象,因此所有BOM模型中的对象都是该对象的子对象

  • HTML DOM 的 document 也是 window 对象的属性之一

子对象 作用
document 文档对象用于操作页面元素
location 地址对象用于操作URL地址
navigator 浏览器对象用于获取浏览器版本信息
history 历史对象用于操作浏览器历史
screen 屏幕对象用于操作屏幕的高度和宽度
属性
属性名 说明
closed 返回一个布尔值,用于判断窗口是否已经关闭。
  • window对象的所有子对象都是window对象的属性

  • 所有的全局变量也都是 window 对象的属性

方法

窗口控制

方法名 说明
open([url],[_blank],[width,height,top,left]] 打开新窗口
close() 关闭当前页面
moveTo(x,y) 移动窗口到指定坐标
moveBy(x,y) 相对当前位置移动
resizeTo(x,y) 窗口大小调整到指定宽高
resizeBy(+w,+h)(可以是正、负数值) 窗口大小增减宽高
HTML 复制代码
<input type="button" value="打开窗口" name="" id="" onclick="openWin()">
<input type="button" value="关闭窗口" name="" id="" onclick="closeWin()">
<input type="button" value="判断窗口" name="" id="" onclick="panduanWin()">
<input type="button" value="移动窗口" name="" id="" onclick="moveWin()">
<input type="button" value="调整窗口大小" name="" id="" onclick="resizeWin()">
<script>
  function openWin(){
        // myWindow = window.open('http://www.baidu.com','',"width=500,height=500,top=100,left=100");
        // window.open('','',"width=200,height=200");
        // window.open('','',"width=500,height=500,top=100,left=100");
        myWindow = window.open('','',"width=500,height=500,top=200,left=200");
        myWindow.document.write('hello world');
  }
    function closeWin(){
        // 注意: 接收一个打开的窗口的名字
        myWindow.close();

    }
    function panduanWin(){
        // 能够判断窗口的状态是关闭的还是打开的
        // false=没有关闭  true=关闭
        console.log(myWindow.closed);
    }
    function moveWin(){
        // moveTo(x,y) x,y 只能为正值
        // moveBy(100,-100) 当前坐标的基础 + 100,-100
        myWindow.moveBy(-100,100);
    }
    function resizeWin(){
        // resizeTo(x,y) x,y 只能为正值
        // resizeBy(100,-100) 当前坐标的基础 + 100,-100
        // myWindow.resizeTo(100,100);
        myWindow.resizeBy(-100,-100);
    }
</script>

注意:在使用moveTo,moveBy,resizeTo,resezeBy的时候,打开的窗口必须是自己的窗口,不能使用百度等在线的地址,会出现跨域的错误

弹窗方法

方法名 说明
alert("信息内容") 弹出一个警告框
confirm("信息内容") 弹出一个确认对话框
prompt("信息内容",["默认输入内容"]) 弹出一个提示对话框
  • 如果用户点击确定按钮,则 confirm() 返回 true。如果点击取消按钮,则 confirm() 返回 false。

  • 在调用 confirm() 时,将暂停对 JavaScript 代码的执行,在用户作出响应之前,不会执行下一条语句。

任务计划

方法名 说明
setInterval("javascript语句",毫秒) 周期性执行计时器(执行多次)
clearInterval(计时器) 取消计时器
setTimeout("javascript语句",毫秒) 定时执行计时器(只执行一次)
clearTimeout(计时器) 取消计时器
JavaScript 复制代码
// 只执行一下
setTimeout(function(){
    alert('欢迎光临');
},1000);
// 周期性定时器
setInterval(function(){
    alert('hello world');
}, 1000);

一般情况下,打开网页的时候弹出的广告就使用setTimeout,因为只要打开页面,就需要弹出广告,并且只弹出一次

案例1:发送验证码功能

![[531ec9a0-33c3-43f3-9dee-36478e7b3a18.png]]

![[e0d5b669-5ea8-40c7-b6b2-2f657dcc9c15.png]]

location对象

location 对象用于获得当前页面的地址 (URL),或把浏览器重定向到新的页面

JavaScript 复制代码
window.location="https://www.baidu.com/"
HTML 复制代码
<a id='a1' href="http://www.baidu.com">百度</a>
<script>
  var a1= document.getElementById('a1');
    a1.onclick = function(){
        // 重定向到淘宝
        window.location = "http://www.taobao.com";
        // 阻止默认事件的发生
        return false;
    }  
</script>
属性
属性名 说明
pathname 返回当前页面的路径和文件名。
href 返回当前页面的 URL
hostname 返回域名
port 返回端口
protocol 返回协议
search 返回传值部分

修改href的值

JavaScript 复制代码
location.href="https://www.baidu.com/"
JavaScript 复制代码
console.log(window.location.pathname);  // 返回文件名和路径地址
// console.log(location.pathname); // 可以省略window
console.log(location.href);  // 返回当前页面的url路径
console.log(location.hostname); // 返回域名 127.0.0.1
console.log(location.port); // 返回端口号 5500
console.log(location.protocol); // 返回协议 http
console.log(location.search); // 返回参数值
方法
方法名 说明
reload([true]) 刷新,true 从服务器获取数据,不添加默认从缓存中获取数据
replace("url") 跳转到新页面

多种跳转方式

JavaScript 复制代码
location.replace("https://www.qtummatrix.com/") // 替换当前路径
window.location  ='' // 跳转到对应的页面
window.location.href = '' // 跳转到对应的页面
window.open('url')

history对象

history对象是JavaScript中的一种默认对象,该对象可以用来存储客户端浏览器窗口最近浏览过的历史网址。通过History对象的方法,可以完成类似于浏览器窗口中的前进、后退等按钮的功能

属性名 说明
length 浏览器窗口的历史列表中的网页个数
方法
方法名 说明
go(num) 该方法可以直接跳转到某一个已经访问过的URL。
forward() 该方法可以前进到下一个访问过的URL,等价于go(1)
back() 该方法可以返回到上一个访问过的URL,等价于go(-1)

back()表示返回到上一页面,效果相当于go(-1);

forward()表示返回到下一页面,效果相当于go(1);

go()用于指定页的跳转,比如go(-2)表示返回到浏览过的前两个页面

思考: history.go(0)是什么效果

navigator对象,也称为浏览器对象,该对象包含了浏览器的整体信息,如浏览器名称、版本号等

属性名 说明
appName 返回浏览器的名称
appVersion 返回浏览器的版本号
browserLanguage 返回当前浏览器的语言。[不兼容]
platform 返回运行浏览器的操作系统或硬件平台
cookieEnabled 检测浏览器是否支持Cookie。该属性值为布尔类型,如果浏览器支持Cookie则返回true,否则返回false
userAgent 一个只读的字符串,获取浏览器用于 HTTP 请求的用户代理头的值

IE11 - userAgent

低版本IE7 - userAgent

Chrome - userAgent

![[593fbaae-6ff4-475e-9aef-1ff9c0803c44.png]]

Safari - userAgent

火狐 - userAgent

appVersion: "5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome

userAgent参数:

  • Mozilla:是Netscape浏览器的内核 Mozilla最开始是网景公司的,在userAgent看到她表示可以支持html标准框架;因为IE浏览器也是支持html标准框架的,所以最开始为了拿到含有标准框架的页面,也把userAgent设置成了Mozilla,

  • windows NT:是微软发布的桌面端操作系统,一般指window电脑

  • Trident:IE浏览器的内核,IE、傲游、世界之窗浏览器、腾讯TT等都使用这个内核

  • MSIE:全称为Microsoft Internet Explorer,是微软公司的网页浏览器

  • compatible:兼容版本

  • Macintosh:Mac的全拼,一般指苹果公司的计算机

  • AppleWebKit:是苹果公司开发的浏览器核心;但后来谷歌公司和它合作,你下载个谷歌浏览器看看里面也是用了AppleWebKit核心

  • KHTML:

  • Gecko:是一个排版引擎,这个排版引擎最开始也是网景公司开发的

  • webkit:这个内核是safari的,在2005年苹果进行了开源

注意:chrome浏览器使用的是webkit的一个分支,命名为chromium,他在自己的浏览器中加入了chrome和safae两个名字;后来有了新的内核Blink

案例:使用userAgent判断是否为低版本IE浏览器

JavaScript 复制代码
if(navigator.userAgent.indexOf("MSIE") > -1){
    console.log("低版本IE浏览器");
}else{
    console.log("普通浏览器");
}

案例:判断是否是手机端,是否要跳转手机端页面

JavaScript 复制代码
if(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)){
    window.location.href = ''; // 手机端 
}else{
    window.location.href = ''; // 电脑
}

screen对象

  1. screen对象是一个由JavaScript自动创建的对象,该对象的作用主要是描述客户端的显示器的信息,例如屏幕的分辨率、可用颜色数等。

  2. screen对象是一个全局对象,该对象中存放的都是静态属性,这些属性值是只读的

属性名 说明
height 屏幕的高度,单位为像素
width 屏幕的宽度,单位为像素
colorDepth 颜色深度
availHeight 显示器可用的屏幕高度,单位为像素。(不含任务栏)
availWidth 显示器可用的屏幕宽度,单位为像素

今天作业

创建一个表单,对表单中的用户名/密码/电话号码进行验证 如果用户名长度在5-10位之间,并且以字母开头 密码全都是数字 电话号码都是数字并且长度为11位,并且第一位是1,那么就提交到msg.php 页面,否则就弹窗输出错误提示 页面加载完毕,在页面弹出登录窗口,点击 X 关闭窗口(类似于知乎网站没有登陆的时候,访问时遮罩层的效果)

encodeURIComponent() 函数

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 该方法不会对 ASCII 字母和数字进行编码,也不会对这些 ASCII 标点符号进行编码: - _ . ! ~ * ' ( ) 。 其他字符(比如 :;/?😡&=+$,# 这些用于分隔 URI 组件的标点符号),都是由一个或多个十六进制的转义序列替换的。

JavaScript 复制代码
var uri="http://w3cschool.cc/my test.php?name=ståle&car=saab";
document.write(encodeURIComponent(uri));
// 结果:http%3A%2F%2Fw3cschool.cc%2Fmy%20test.php%3Fname%3Dst%C3%A5le%26car%3Dsaab

decodeURIComponent解码

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

相关推荐
共享ui设计和前端开发2 小时前
UI前端大数据可视化实战策略:如何设计符合用户认知的数据可视化界面?
前端·ui·信息可视化
Akshsjsjenjd2 小时前
Ansible 变量与加密文件全解析:从基础定义到安全实践
前端·安全·ansible
chinesegf2 小时前
浏览器内存 (JavaScript运行时内存)存储的优劣分析
开发语言·javascript·ecmascript
whysqwhw3 小时前
JavaScript 动态代理全面指南
前端
Highcharts.js3 小时前
Highcharts Stock 股票图在交易系统中的应用思路
前端·数据可视化·股票图
teeeeeeemo3 小时前
前端模块化(commonJS和ES Module)
前端·笔记·es6·前端模块化
小old弟4 小时前
前端异常隔离方案:Proxy代理、Web Workers和iframe
前端
脑子慢且灵4 小时前
【Web前端】JS+DOM来实现乌龟追兔子小游戏
java·开发语言·前端·js·dom
TimelessHaze4 小时前
前端面试必问:深浅拷贝从基础到手写,一篇讲透
前端·trae