- A+
所属分类：Web前端
BOM
BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，
比如：刷新浏览器、后退、前进、在浏览器中输入URL等
BOM的顶级对象window
window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window 注意：window下一个特殊的属性 window.name
之前用的 docuement完整写法：
window.document.getElementById("xx");
window.alert(); --> alert();
全局变量函数和隐式变量
我们定义的全局变量,函数，隐式变量其实默认都是window的属性和方法。
<script>
// 全局变量
var x = 100; // -- > window.x = 100
// 全局的函数
function fu(){ // window.fu = function(){...}
console.log(11);
// 隐式变量 （不使用var申明）
stuName = "旗木卡卡西"; // window.stuName="xxxxx"
// 局部变量，根window没有关系
var st = "abc";
console.log("window.st="+window.st)// undefined
}
// 调用的时候
fu();// --> window.fu();
console.log(window);
if(1==1){
var score = 100;
}
console.log("score="+score);// 100
var y = 100;// window.y = 100;
var y = 10000;// window.y = 10000;
console.log(y);
</script>
对话框
-
alert() ： 不太友好的提示
-
prompt() ： 可输入的提示框
-
confirm() ： 有确定和取消按钮的确认框
案例：
<h2>window的弹窗</h2>
<input type="button" value="alert" id="alertBtn">
<input type="button" value="prompt" id="promptBtn">
<input type="button" value="confirm" id="confirmBtn">
<script>
document.getElementById("alertBtn").onclick=function(){
window.alert("就是一个提示，你只能点击确定按钮");
}
document.getElementById("promptBtn").onclick=function(){
// 两个参数：
// 第一个参数：弹窗框的标题
// 第二个参数： 弹出框中的输入框的默认值
var result = window.prompt("请输入你的年龄",18);
// result : 确定按钮，得到输入框的值。 取消：null
console.log(result);
}
document.getElementById("confirmBtn").onclick=function(){
var result =confirm("今天你是加班还是回家");
// result： 确定true， 取消false
if(result){
alert("你是一个好员工！老板明年换大奔！");
}else{
alert("你是一个好老公！明年带上好帽子！");
}
}
// window.open("http://www.baidu.com")
function removeFriend(){
if(confirm("您确定要删除好友[法外狂徒-张三]吗？")){
// 开始删除
document.querySelector("li").remove();
}
}
</script>
<ul>
<!-- 使用超链接调用javascript函数-->
<li>张三 <a href="javascript:removeFriend()">删除</a></li>
</ul>
页面加载事件
-
onload
window.onload = function () {
// 当页面加载完成执行
// 当页面完全加载所有内容（包括图像、脚本文件、CSS 文件等）执行
}
-
onunload
window.onunload = function () {
// 当用户退出页面时执行
}
window的其他属性
Window.innerHeight 获得浏览器窗口的内容区域的高度，包含水平滚动条(如果有的话)。 Window.innerWidth 获得浏览器窗口的内容区域的宽度，包含垂直滚动条(如果有的话)。
Window.outerHeight 返回浏览器窗口的外部高度。 Window.outerWidth 返回浏览器窗口的外部宽度。 Window.pageXOffset window.scrollX的别名。 Window.pageYOffset window.scrollY的别名。 Window.parent 返回当前窗口或子窗口的父窗口的引用。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0px;
margin: 0px;
border: 0px;
}
</style>
</head>
<body>
<script>
// 全局变量
var x = 100; // -- > window.x = 100
// 全局的函数
function fu(){ // window.fu = function(){...}
console.log(11);
// 隐式变量 （不使用var申明）
stuName = "旗木卡卡西"; // window.stuName="xxxxx"
// 局部变量，根window没有关系
var st = "abc";
console.log("window.st="+window.st)// undefined
}
// 调用的时候
fu();// --> window.fu();
console.log(window);
if(1==1){
var score = 100;
}
console.log("score="+score);// 100
var y = 100;// window.y = 100;
var y = 10000;// window.y = 10000;
console.log(y);
</script>
<hr>
<h2>window的弹窗</h2>
<input type="button" value="alert" id="alertBtn">
<input type="button" value="prompt" id="promptBtn">
<input type="button" value="confirm" id="confirmBtn">
<script>
document.getElementById("alertBtn").onclick=function(){
window.alert("就是一个提示，你只能点击确定按钮");
}
document.getElementById("promptBtn").onclick=function(){
// 两个参数：
// 第一个参数：弹窗框的标题
// 第二个参数： 弹出框中的输入框的默认值
var result = window.prompt("请输入你的年龄",18);
// result : 确定按钮，得到输入框的值。 取消：null