1.1 BOM基本定义
Browser Object Mode浏览器对象模型,操作浏览器中各种对象。
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
Window 对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数。
1.2 Window对象
- 所有浏览器都支持 window 对象。它表示浏览器窗口。
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
1.3 BOM 基本属性
显示区域的高度和宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示区域的高度和宽度</title>
</head>
<body>
<script>
document.write("文档内容");
document.write("文档显示区域的宽度"+window.innerWidth);
document.write("<br>");
document.write("文档显示区域的高度"+window.innerHeight);
</script>
</body>
</html>
执行结果
窗体的宽度和高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>窗体的宽度和高度 </title>
</head>
<body>
<script type="text/javascript">
document.write("浏览器的宽度:"+window.outerWidth);
document.write("<br>");
document.write("浏览器的高度:"+window.outerHeight);
</script>
</body>
</html>
执行结果
浏览器离屏幕的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浏览器离屏幕的距离</title>
</head>
<body>
<script type="text/javascript">
// 浏览器离屏幕左边的距离
console.log(window.screenLeft);
// 浏览器离屏幕上边的距离
console.log(window.screenTop);
</script>
</body>
</html>
执行结果
打开新窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>openNewWindow</title>
<script>
function openNewWindow(){
myWindow=window.open("https://www.imooc.com/");
}
</script>
</head>
<body>
<button onclick="openNewWindow()">打开一个新的窗口</button>
</body>
</html>
执行结果
1.4 Navigator对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigator</title>
</head>
<body>
<script type="text/javascript">
// Navigator: 代表当前浏览器的信息, 通过Navigator我们就能判断用户当前是什么浏览器
let agent = window.navigator.userAgent;
// 条件判断
if(/chrome/i.test(agent)){
console.log("当前是谷歌浏览器");
}else if(/firefox/i.test(agent)){
console.log("当前是火狐浏览器");
}else if(/msie/i.test(agent)){
console.log("当前是低级IE浏览器");
}else if("ActiveXObject" in window){
console.log("当前是高级IE浏览器");
}
</script>
</body>
</html>
执行结果
1.5 Location对象
Location:代表浏览器地址栏的信息,通过Location能设置或者获取当前地址信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<button id=div1>跳转页面</button>
<button id="div2">刷新页面</button>
<script type="text/javascript">
/*跳转页面*/
div1.onclick = function(){
location.href = "https://www.baidu.com"
};
/*刷新页面*/
div2.onclick = function(){
location.reload();
};
</script>
</body>
</html>
执行结果
9.6 History对象
History: 代表浏览器的历史信息, 通过History来实现刷新/前进/后退。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history</title>
</head>
<body>
<h3>第一个界面</h3>
<button id="btn1">前进</button>
<button id="btn2">刷新</button>
<a href="09-history.html">新的页面</a>
<script type="text/javascript">
// History:代表浏览器的历史信息, 通过History来实现刷新/前进/后退
let oBtn1 = document.querySelector("#btn1");
let oBtn2 = document.querySelector("#btn2");
/*
注意点:
只有当前访问过其它的界面, 才能通过forward/go方法前进
如果给go方法传递1, 就代表前进1个界面, 传递2就代表进行2个界面
*/
oBtn1.onclick = function (){
// window.history.forward();
window.history.go(1);
}
// 刷新:如果给go方法传递0,就代表刷新
oBtn2.onclick = function (){
window.history.go(0);
}
</script>
</body>
</html>
代码示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-history</title>
</head>
<body>
<h3>新的页面</h3>
<button id="btn1">后退</button>
<script type="text/javascript">
// History:代表浏览器的历史信息,通过History来实现刷新/上一步/下一步
let oBtn1 = document.querySelector("#btn1");
/*
注意点:
只有当前访问过其它的界面, back/go方法后退
如果给go方法传递-1, 就代表后退1个界面, 传递-2就代表后退2个界面
*/
// 后退
oBtn1.onclick = function (){
// window.history.back();
window.history.go(-1);
}
</script>
</body>
</html>
执行结果
1.7 JavaScript 弹窗
1.7.1 警告框(alert)
警告框经常用于确保用户可以得到某些信息。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>警告框</title>
</head>
<body>
<div id='div1'>go</div>
<script type="text/javascript">
div1.onclick = function(){
alert(1)
};
</script>
</body>
</html>
1.7.2 确认框(confirm)
- 确认框通常用于验证是否接受用户操作。
- 当确认卡弹出时,用户可以点击 “确认” 或者 “取消” 来确定用户操作。
- 点击 “确认”, 确认框返回 true, 如果点击 “取消”, 确认框返回 false。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>确认框</title>
</head>
<body>
<p>点击按钮,显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
执行结果
1.7.3 提示框(prompt)
- 提示框经常用于提示用户在进入页面前输入某个值。
- 当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
- 如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>提示框</title>
</head>
<body>
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>