BOM基本

最新推荐文章于 2024-09-14 19:44:09 发布

浮光跃金.free

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量85

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_52040402/article/details/131635438

版权

虽然 ECMAScript 把浏览器对象模型（BOM，Browser Object Model）描述为JavaScript 的核心，但实际上 BOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。多年来，BOM 是在缺乏规范的背景下发展起来的，因此既充满乐趣又问题多多。毕竟，浏览器开发商都按照自己的意愿来为它添砖加瓦。最终，浏览器实现之间共通的部分成为了事实标准，为 Web 开发提供了浏览器间互操作的基础。HTML5 规范中有一部分涵盖了 BOM 的主要内容，因为 W3C 希望将JavaScript 在浏览器中最基础的部分标准化。

一.window对象

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

1.Global作用域

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。比如：

<script>
  var name = 'zhangsan';
  var sayName = function () {
    console.log(this.name);
  }
  console.log(window.name); //zhangsan
  sayName();  //zhangsan
  window.sayName(); //zhangsan
</script>

这里，变量 name 和函数 sayName()被定义在全局作用域中，它们自动成为了 window 对象的成员。因此，变量 name 可以通过 window.name 来访问，而函数 sayName()也可以通过 window.sayName()来访问。因为 sayName()存在于全局作用域，this.name 映射到 window.name，所以就可以显示正确的结果了。

2.Window窗口

2.1.窗口位置

screenLeft和screenTop

属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)

screenX和screenY

属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持，火狐可以使用此属性)

pageXOffset

设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset

设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

注意：IE8及更早IE版本不支持该属性,但可以使用 "document.body.scrollLeft" 和 "document.body.scrollTop" 属性。

2.2.窗口大小

innerWidth 页面视图区的宽度

innerHeight 页面视图区的高度

outerWidth 浏览器窗口的宽度

outerHeight 浏览器窗口的高度

注意：所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。

注意：IE8及更早IE版本不支持这些属性。

2.3.screen对象

屏幕总宽度/高度(像素单位): screen.width screen.height

可用宽度/高度(像素单位): screen.availWidth screen.availHeight

颜色深度: screen.colorDepth

颜色分辨率: screen.pixelDepth

3.Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

语法

window.open(URL,name,specs,replace)

参数

1.URL

可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。

2.name

可选。指定target属性或窗口的名称。支持以下值：

_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

3.specs

可选。一个逗号分隔的项目列表。支持以下值：

HANNELMODE=YES\|NO\|1\|0	是否要在影院模式显示 WINDOW。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

4.replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

<!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>
	<script>
		window.onload = function(){
			var btn = document.querySelectorAll('button')[0];
			var btn2 = document.querySelectorAll('button')[1];
			btn.onclick = function(){
				// 打开一个页面  open 参数:url name 可配置对象(不能超过浏览器视口大小) true false

				// window.open('https://www.baidu.com','_blank','height=800px,width=800px',false);

				w = window.open('https://www.baidu.com','_blank','height=800px,width=800px');
				// 返回一个窗口对象
				// console.log(w,'接收的是一个窗口对象');
				//resizeTo 新窗口宽高
				w.resizeTo(400,400);
				// 设置新窗口位置
				w.moveTo(100,100);
			}
			btn2.onclick = function(){
				// 关闭窗口
				w.close()
			}
		}
	</script>
</head>
<body>
	<button>点击我</button>
	<button>关闭新窗口</button>
</body>
</html>

4.系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

4.1alert()

alert()接收一个要显示给用户的字符串。与 console.log 可以接收任意数量的参数且能一次性打印这些参数不同，alert()只接收一个参数。调用 alert()时，传入的字符串会显示在一个系统对话框中。对话框只有一个“OK”（确定）按钮。如果传给 alert()的参数不是一个原始字符串，则会调用这个值的 toString()方法将其转换为字符串。

警告框（alert）通常用于向用户显示一些他们无法控制的消息，比如报错。用户唯一的选择就是在看到警告框之后把它关闭。

alert('我是警告框')

4.2confirm()

确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框有两个按钮：“Cancel”（取消）和“OK”（确定）。用户通过单击不同的按钮表明希望接下来执行什么操作。比如，confirm("你确定吗?")；

要知道用户单击了 OK 按钮还是 Cancel 按钮，可以判断 confirm()方法的返回值：true 表示单击了 OK 按钮，false 表示单击了 Cancel 按钮或者通过单击某一角上的 X 图标关闭了确认框。确认框的典型用法如下所示：

<script>
  var result = confirm('你确定吗?');
  if (result) {
    console.log('确定');
  }else{
    console.log('取消');
  }
</script>

4.3prompt()

提示框，通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。除了 OK 和 Cancel 按钮，提示框还会显示一个文本框，让用户输入内容。prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。调用 prompt("你叫什么名字?")，如果用户单击了 OK 按钮，则 prompt()会返回文本框中的值。如果用户单击了 Cancel 按钮，或者对话框被关闭，则 prompt()会返回 null。

<script>
  var result = prompt("你叫什么名字?");
  if (result) {
    console.log(result);
  }else{
    console.log('取消');
  }
</script>

<script>
		// 弹框 
		alert('hello bom'); //删除 新增 编辑 组件库封装弹框
		// 确认框 confirm 
		var res = confirm('您确定吗?');
		console.log(res);//true false 
		if(res){
			console.log('确定')
		}else{
			console.log('取消')
		}
		// 输入框 prompt
		var res = prompt('请输入您的姓名');
		console.log(res);

	</script>

5.location

location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

location是个神奇的对象，既是window的对象也是document的对象。经过我们的对比发现，直接使用location对象也可以。

<script>
  console.log(window.location === document.location); //true
  console.log(location === document.location);  //true
  console.log(location === window.location);    //true
</script>

5.1属性

host 返回服务器名称和端口号

hostname 返回不带端口号的服务器名称

href 返回当前加载页面的完整URL

pathname 返回URL的目录和文件名

port 返回URL中指定的端口号

protocol 返回页面使用的协议

search 返回URL的查询字符串。这个字符串以问号开头

console.log(location.href);
// file:///C:/Users/86131/Desktop/%E5%AE%9E%E8%AE%AD/JS/Day17/1-location%E5%AF%B9%E8%B1%A11.html

console.log(location.host);// <empty string>
console.log(location.hostname);//<empty string>
console.log(location.pathname);
///C:/Users/86131/Desktop/%E5%AE%9E%E8%AE%AD/JS/Day17/1-location%E5%AF%B9%E8%B1%A11.html
console.log(location.port);//<empty string>
console.log(location.protocol);//file:
console.log(location.search);//<empty string>

5.2方法

assign() 传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace() 参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload()

重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

   <script>
        window.onload = function(){
            // 1.assign() 页面跳转
            // 参数:url    会在浏览器中产生一条历史记录
            var btn1 = document.body.children[0]
            btn1.onclick = function(){
                location.assign('./2-测试.html')
            }

            // 2.replace() 替换页面
            // 参数:要替换页面的路径
            // 可以进行页面跳转 替换页面 不会在浏览器中产生历史记录
            var btn2 = document.body.children[1]
            btn2.onclick = function(){
                location.replace('./2-测试.html')
            }

            // 3.reload() 刷新页面
            // 参数:false(默认) true
            // false 请求缓存资源
            // true强制从服务器请求数据
            var btn3 = document.body.children[2]
            btn3.onclick = function(){
                // location.reload()
                location.reload(true)
                // 小刷 和 大刷区别? f5刷新文档 请求浏览器缓存资源 
				// 大刷 请求服务器资源
            }
    </script>
</head>
<body>
    <button>跳转页面</button>
	<button>替换页面</button>
	<button>刷新页面</button>
	<button>前进一个页面</button>
</body>

6.history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进,注意：没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

length

返回历史列表中的网址数注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back() 加载 history 列表中的前一个 URL

<script>
		window.onload = function(){
			var btn = document.querySelector('button');
			// history
			// 4.back() 加载 history 列表中的前一个 URL  回退一个页面
			
			btn.onclick = function(){
				// history.back()
				history.go(-1);
			}
		}
	</script>
</head>
<body>
	<div>我是测试页面 ------</div>
	<button>返回上一个页面</button>

forward() 加载 history 列表中的下一个 URL

go()

加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

<script>
        window.onload = function(){
            // 1.assign() 页面跳转
            // 参数:url    会在浏览器中产生一条历史记录
            var btn1 = document.body.children[0]
            btn1.onclick = function(){
                location.assign('./2-测试.html')
            }
            // 2.replace() 替换页面
            // 参数:要替换页面的路径
            // 可以进行页面跳转 替换页面 不会在浏览器中产生历史记录
            var btn2 = document.body.children[1]
            btn2.onclick = function(){
                location.replace('./2-测试.html')
            }
            // 3.reload() 刷新页面
            // 参数:false(默认) true
            // false 请求缓存资源
            // true强制从服务器请求数据
            var btn3 = document.body.children[2]
            btn3.onclick = function(){
                // location.reload()
                location.reload(true)
                // 小刷 和 大刷区别? f5刷新文档 请求浏览器缓存资源 
				// 大刷 请求服务器资源

                // history 
                // 1.length 		
                // 返回历史列表中的网址数
                // 注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。获取用户访问网址数
                console.log(history.length);
            }
            // history
            // 2.forward 前进一个页面
            var btn4 = document.body.children[3]
            btn4.onclick = function(){
                // history.forward()
            // 3. go() 		
            // 加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。
                history.go(1)
            }
        }
    </script>
</head>
<body>
    <button>跳转页面</button>
	<button>替换页面</button>
	<button>刷新页面</button>
	<button>前进一个页面</button>
</body>

7.间歇调用和超时调用

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。

7.1setTimeout()

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

参数：

1.要执行的代码 2.以毫秒表示的时间。

7.2setInterval()

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

参数：

1.要执行的代码 2.以毫秒表示的时间。

 <script>
        window.onload = function(){
            // 1.超时调用 超过一段时间后调用一次函数 
            // setTimeout(函数,wait) wait单位毫秒 
			// 返回值:返回一个id  用于取消时候使用
			// 取消超时调用clearTimeout(id)

            var id = setTimeout(function(){
                alert('我是setTimeout')
            }, 5000)
            clearTimeout(id)
            console.log(id);//2

            // 2.间歇调用 每隔一段时间函数执行一次
            // setInterval(函数,wait事件)
            // 返回值:返回一个id 取消间歇调用
            // clearInterval(id)

            var id = setInterval(function(){
                alert('我是setInterval')
            }, 3000)
            clearInterval(id)
            console.log(id);//2

            // 新加一个div
            var div = document.createElement('div')
            setInterval(function(){
                // toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。
                div.innerHTML = new Date().toLocaleString()
            }, 1000)
            document.body.appendChild(div)
        

            // 把第一个div变了
            var div = document.body.children[0]
            setInterval(function(){
                var now = new Date().toLocaleString()
                div.firstChild.appendChild(now)
            }, 1000)

        }
    </script>
</head>
<body>
    <div>我是一个div</div>
	<div>我是块级元素</div>
</body>