导读1:什么是BOM
1.BOM全称Browser Object Model,翻译为浏览器对象模型
2.BOM提供了很多对象(对象里面有属性和方法),用于访问浏览器的功能
3.BOM缺少规范,每个浏览器提供商都按照自己的想法去扩展它,那么浏览器共有对象就成了事实的标准。
导读2:BOM核心
1.window对象是BOM中所有对象的核心,表示整个浏览器窗口,但不必表示其中包含的内容。 window对象还可用于移动或调整它表示的浏览器的大小,或者对它产生其他影响。 window对象是JavaScript的顶端对象之一,它是隶属于浏览器层次的,它独立于文档内容与浏览器之间
2.navigator代表当前浏览器信息(版本号、运行的平台等)
3.location代表浏览器的地址栏
4.document代表整个页面文档内容
5.history代表整个浏览器的历史记录(常用于操作翻页)
6.screen代表整个浏览的屏幕
7.frames代表整个窗口中的所有框架页
一.window对象
1.window对象的特性
1.window对象是JavaScript访问浏览器窗口的一个接口
2.window是一个全局对象
<script type="text/javascript">
var sex = '男';
console.log(sex); //男,在调用window对象的属性的时候可以省略window)
console.log(window.sex); //男
function first(){
console.log('window对象');
}
first() //window对象(在调用window对象的方法的时候可以省
window.first() //window对象
</script>
3.document等对象可以看成是window对象的一个属性,在使用的时候省略了window
<body>
<button type="button">我是按钮</button>
</body>
<script type="text/javascript">
/* var btn = window.document.querySelector('button') */
var btn = document.querySelector('button') //省略了window
console.log(btn);
</script>
2.window对象的对话框
对话框方法 | 说明 |
alert(str) | 提示/警告对话框,显示str字符串的内容 |
confirm(str) | 确认对话框,显示str字符串的内容。带确定、取消两个按钮 点确定时返回true;点取消时返回false |
prompt(str,value) | 输入对话框,采用文本框输入信息,str为提示信息,value为初始值 |
<body>
<button type="button" onclick="javascript:fir();">点一下</button>
</body>
<script type="text/javascript">
function fir(){
alert('你要删除我吗?');
/* window.alert(1); */
/* confirm('你确定删除吗?') */
var result = window.confirm('你确定删除吗');
console.log(result); // false
if(result == true){
console.log('你点了ok');
} else {
console.log('你点了cancal');
}
var n = prompt('输入一个正整数:',5)
if(n == undefined){
console.log(1);
}
}
</script>
3.window对象实现窗口的打开与关闭
打开:window.open()
关闭:window.close()
<body>
<button type="button">打开百度</button>
<a href="https://www.baidu.com" target="_blank">百度首页</a>
<a href="https://www.2345.com" target="_self">2345首页</a>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
btn.addEventListener('click',function(e){
/* window.open('https://www.baidu.com','百度首页','width=300,height=200')
window.open('https://www.2345.com','2345首页','width=400,height=300') */
var new1 = window.open('https://www.baidu.com','百度首页','width=500,height=300,top=200,left=500')
var new2 = window.open('https://www.2345.com','2345首页','width=500,height=300,top=200,left=200')
new1.close() // 百度页面关闭,打开的是2345首页
})
</script>
4.window对象的定时器
1.炸弹定时器:window.setTimeout(func, ms)(window可省略)
表示等待ms毫秒之后,执行func。func可以是匿名函数,也可以是函数名(函数另写)
2.停止启动的定时器:window.clearTimeout(timer);(window可省略)
<body>
<button type="button">启动</button>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
setTimeout(function() {
console.log('时间到,爆炸');
}, 4000)
function fn() {
console.log('时间到,boom');
}
setTimeout(fn, 5000)
clearInterval(time1) // 停止了 time1 的定时器
})
</script>
2.闹钟定时器:window.setInterval(func, ms);(window可省略)
表示间隔ms毫秒之后,周期性地执行func
<body>
<button type="button">开启闹钟定时器</button>
<button type="button">关闭闹钟定时器</button>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
var btn1 = btn.nextElementSibling;
btn.addEventListener('click',function(){
timer2 = window.setInterval(fn,1000)
function fn(){
console.log('早上好');
}
})
btn1.onclick = function(){
clearInterval(timer2)
}
</script>
案例1:十秒倒计时
<style type="text/css">
p{
font-size: 30px;
font-weight: bold;
}
</style>
</head>
<body>
<button type="button">开启倒计时</button>
<p></p>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
var p = document.querySelector('p')
var i = 10;
btn.addEventListener('click',function(){
var timer = window.setInterval(function(){
p.innerHTML = i;
i--;
if(i < 0){
p.innerHTML = '时间到';
clearInterval(timer)
}
},1000)
})
</script>
案例2:距离国庆节的倒计时
<style type="text/css">
button{
width: 30px;
height: 30px;
background-color: #000000;
border: none;
color: white;
}
</style>
</head>
<body>
<h1>距离10月1日还剩</h1>
<button type="button" class="day"></button>
<button type="button" class="hour"></button>
<button type="button" class="mintue"></button>
<button type="button" class="second"></button>
</body>
<script type="text/javascript">
var d = document.querySelector('.day')
var h = document.querySelector('.hour')
var m = document.querySelector('.mintue')
var s = document.querySelector('.second')
count();
setInterval(count,1000)
function count() {
var now = new Date().getTime()
var time = new Date('2021-10-1 00:00:00').getTime()
var times = (time - now) / 1000;
var day = parseInt(times / 60 / 60 / 24);
d.innerHTML = day;
var hour = parseInt(times / 60 / 60 % 24); // 时
h.innerHTML = hour;
var mintue = parseInt(times / 60 % 60); // 分
m.innerHTML = mintue;
var second = parseInt(times % 60);
s.innerHTML = second;
}
</script>
5.window对象的窗口(页面)加载事件
onload事件:当文档内容完全加载完成,会触发该事件, 就调用该事件的处理函数。
<body>
<button type="button">点击我</button>
</body>
<!-- onload在页面加载完之后才执行里面的代码,所以放在body上面也是可以的 -->
<script type="text/javascript">
window.onload = function() {
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
console.log('我是好人');
})
}
</script>
6.window对象的调整窗口大小事件
onresize事件:只要窗口大小发生像素变化,就会触发这个事件。
<style type="text/css">
.div{
width: 200px;
height: 200px;
background-color: #00FF00;
}
</style>
</head>
<body>
<div class="div">
我是一个盒子
</div>
</body>
<script type="text/javascript">
var div = document.querySelector('.div')
window.onresize = function(){
if(window.innerWidth < 500){
div.style.backgroundColor = 'blue';
} else{
div.style.backgroundColor = 'red';
}
}
</script>
二.navigator对象
navigator 对象包含有关浏览器的信息。常用于获取客户端浏览器和操作系统信息
navigator 数据可被浏览器使用者更改,所以来自 navigator 对象的信息有时具有误导性
<script type="text/javascript">
console.log(navigator.appCodeName);
console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.cookieEnabled);
console.log(navigator.platform);
console.log(navigator.userAgent);
console.log(navigator.language);
console.log(navigator.product);
// 我们可以通过for in的方法遍历对象,结果有很多
for (var key in navigator) {
console.log(key);
}
</script>
三.location对象
window对象给我们提供了一个location属性,属性返回的是一个对象
location对象用于获取或设置窗体的URL(即获取和改变当前浏览的网址),并且可以用于解析URL
直接上代码
<body>
<button type="button">location对象</button>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
// location.href = 'http://www.baidu.com'; 可以后退
// location.assign('http://www.baidu.com'); 可以后退
location.replace('http://www.baidu.com'); // 后退前进功能不可用
console.log(location.host); // 127.0.0.1:8848
console.log(location.pathname);
console.log(location.protocol); // http:
/* location.reload(); 闪退*/
})
</script>
四.document对象
五.history对象
history对象包含浏览器历史,即含有用户在浏览器窗口中访问过的网页的URL地址
属性和方法 | 说明 |
history.length | 浏览器历史列表中的URL数量 |
history.back() | 等同于在浏览器点击“后退”按钮。等价于history.go(-1) |
history.forward() | 等同于在浏览器中点击“前进”按钮。等价于history.go(1) |
history.go(i) | 选择任意历史记录加载。即转到任意历史记录 参数如果是1表示前进1个页面,如果是-1表示后退一个页面 |
history.go(0) | 刷新当前页面 |
history.go(-2) | 单击两次“后退”按钮 |
// after.html
<body>
<a href="before.html">查看before</a>
<button type="button">前进</button>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
btn.onclick = function() {
history.go(1)
}
</script>
// before.html
<body>
<a href="after.html">查看after</a>
<button type="button">后退</button>
</body>
<script type="text/javascript">
var btn = document.querySelector('button')
btn.onclick = function(){
history.go(-1)
}
</script>
六.screen对象
screen 对象包含有关客户端显示的用户屏幕的信息,常用于获取屏幕的分辨率和色彩
属性 | 说明 |
screen.width | 返回以像素计的访问者屏幕的宽度 |
screen.height | 返回以像素计的访问者屏幕的高度 |
screen.availWidth | 返回以像素计的访问者屏幕的可用宽度 |
screen.availHeight | 返回以像素计的访问者屏幕的可用高度 |
screen.colorDepth | 返回色彩深度 |
screen.pixelDepth | 返回色彩分辨率 |
<script type="text/javascript">
console.log(screen.width); // 1920
console.log(screen.height); // 1080
console.log(screen.availHeight); // 1030
console.log(screen.availWidth); // 1920
console.log(screen.colorDepth); // 24
console.log(screen.pixelDepth); // 24
</script>
注意:在hbulider的内置浏览器里面。分辨率为1920 * 1080,但是运行到chrome就变成了1536 * 864,这是因为显示设置里面推荐的是125%,换成100%就可以了
七.frames对象
window 对象表示浏览器中打开的窗口。如果文档包含框架(frame或iframe标签),浏览器会为HTML文档创建一个window对象,并为每个框架创建一个额外的window对象。这些框架的window对象会被存放在frames集合中,即浏览器窗口对象的window.frames属性中,并可以通过下标或框架名进行索引
属性 | 说明 |
window.parent | 返回当前窗口的父窗口。 |
window.top | 返回当前窗口的最顶层浏览器窗口 |
window.frames | 以集合的方式返回当前窗口中包含的所有框架的window对象。 该集合是window对象的数组,即数组中的一元素是一个个框架的window对象 |
window.frames.length | 数组frames[]中含有的元素个数。 frames[]数组中引用的框架可能还包括框架,它们自己也具有frames[]数组 |
window.frames.nameValue | 根据框架标签(frame/iframe)的name属性值,获取该框架的window对象 |
window.frames['nameValue'] | 根据框架标签(frame/iframe)的name属性值,获取该框架的window对象 |
// index.html
<body>
<frameset rows="100,*">
<frame src="top.html" name="one" >
<frameset cols="150,*">
<frame src="left.html" name="two">
<frame src="right.html" name="three">
</frameset>
</frameset>
</body>
// top.html
<style type="text/css">
button{
display: block;
margin: 5px;
}
</style>
</head>
<body>
<button type="button" onclick="window.document.bgColor = 'red'">操作自己</button>
<button type="button" onclick="window.parent.frames[1].document.bgColor = 'green'">操作left</button>
<button type="button" onclick="window.parent.frames[2].document.bgColor = 'blue'">操作right</button>
</body>
// left.html
<style type="text/css">
button{
display: block;
margin: 5px;
}
</style>
</head>
<body>
<button type="button" onclick="window.document.bgColor = 'red'">操作自己</button>
<button type="button" onclick="window.top.frames[0].document.bgColor = 'blue'">操作top</button>
<button type="button" onclick="window.parent.frames[2].document.bgColor = 'green'">操作right</button>
</body>
// right.html
<style type="text/css">
button{
display: block;
margin: 5px;
}
</style>
</head>
<body>
<button type="button" onclick="window.document.bgColor = 'red'">操作自己</button>
<button type="button" onclick="window.top.frames[0].document.bgColor = 'green'">操作top</button>
<button type="button" onclick="window.parent.frames[1].document.bgColor = 'blue'">操作left</button>
</body>