我是靠谱客的博主 醉熏老虎,最近开发中收集的这篇文章主要介绍JavaScript Window浏览器对象模型(BOM)window对象window对象属性window对象方法,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

JavaScript Window浏览器对象模型(BOM)

  • window对象
  • window对象属性
    • history对象
    • location对象
  • window对象方法
    • 打开和关闭浏览器案例
    • 弹窗案例
    • 定时器案例

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

BOM:Browser Object Model,中文浏览器对象模型。

虽然现在BOM尚无正式标准,但是由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同
方法和属性,因此window常被认为是 BOM 的方法和属性。

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。( 没有应用于 window 对象的公开标准,不过
所有浏览器都支持该对象)。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

Window 对象表示浏览器中打开的窗口。

window对象属性

常见属性

属性描述
document对Document对象的只读引用
history对History对象的只读引用
location用于窗口或框架的Location对象
name设置或返回窗口的名称

history对象

window.history 对象包含浏览器的历史。

window.history对象在编写时可不使用 window 这个前缀。

常用方法

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

history.go(1/-1)-- 参数为1:等同于history.forward(),参数为-1,等同于history.back()

<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.go(1)">前进go</a>
<a href="javascript:window.history.go(-1)">后退go</a>

location对象

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

常用属性方法

window.location 对象在编写时可不使用 window 这个前缀。
href 当前窗口正在浏览的网页地址

replace(url) 转向到url网页地址

reload() 重新载入当前网址,如同按下刷新按钮

<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
<a href="javascript:window.location.reload()">刷新</a><br />
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br/>

window对象方法

常用方法

方法描述
alert()显示带有一段消息和一个确认按钮的警告框
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()显示可提示用户输入的对话框
open()打开一个新的浏览器窗口或查找一个已命名的窗口
close()关闭浏览器窗口
setTimeout()在指定的毫秒数后调用函数或计算表达式
setInterval()按照指定的周期(以毫秒计)来调用函数或计算表达式
clearInterval()取消由setInterval()设置的timeout
clearTimeout()取消由setTimeout()方法设置的timeout

打开和关闭浏览器案例

<a href="javascript:window.open('https://www.baidu.com')">打开百度</a>
<a href="javascript:window.open('index.html')">打开-index</a>
<a href="javascript:window.close()">关闭当前页面</a>

弹窗案例

<script>
	//window对象常用的弹框方法
	//1、基本弹框
	window.alert("只有一个确定按钮的对话框");
	//2、对话框:有确定和取消两个看你,点击确定返回true,点击取消返回false
	var res = window.confirm("确认要关闭吗?");
	if(res) {
		alert("点击了确定按钮");
	} else {
		alert("点击取消按钮");
	}
	//3、输入框:prompt(提示信息,默认值)
	var age = prompt("请输入年龄:", 19);
	alert("输入的年龄信息是:" + age);
</script>

定时器案例

使用setInterval显示当前时间和停止显示

		<div id="today1">
			div--显示时间1
		</div>
		<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
		<script>
			function showTime1() {
				var time = new Date();
				var y = time.getFullYear();
				var mon = time.getMonth();
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				document.getElementById("today1").innerHTML = y + "年" + mon + "月" + d + "日"+h+": "+m+": "+s;
			}
			//定时器setInterval(定时调用的函数,时间间隔毫秒)
			var flag1 = window.setInterval("showTime1()", 1000);
		</script>

在这里插入图片描述
使用setTimeout显示当前时间和停止显示

		<div id="today2">
			div--显示时间2
		</div>
		<a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
		<script>
			function showTime2() {
				var time = new Date();
				var y = time.getFullYear();
				var mon = time.getMonth();
				var d = time.getDate();
				var h = time.getHours();
				var m = time.getMinutes();
				var s = time.getSeconds();
				document.getElementById("today2").innerHTML = y + "年" + mon + "月" + d + "日"+h+": "+m+": "+s;
				flag2 = window.setTimeout("showTime2()", 1000);
			}
			//在指定的毫秒数后调用函数或计算表达式。
			var flag2 = window.setTimeout("showTime2()", 1000);
		</script>

在这里插入图片描述

最后

以上就是醉熏老虎为你收集整理的JavaScript Window浏览器对象模型(BOM)window对象window对象属性window对象方法的全部内容,希望文章能够帮你解决JavaScript Window浏览器对象模型(BOM)window对象window对象属性window对象方法所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(31)

评论列表共有 0 条评论

立即
投稿
返回
顶部