JavaScript04: Bom浏览器对象模型

最新推荐文章于 2024-05-17 20:45:22 发布

moc ^_^

最新推荐文章于 2024-05-17 20:45:22 发布

阅读量113

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_35976650/article/details/89409375

版权

前端专栏收录该内容

16 篇文章 1 订阅

订阅专栏

BOM（browser object model）浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，主要用于管理窗口与窗口之间的通讯。

一、Window对象

window是浏览器的一个实例，在浏览器中，window对象有双重角色，它既是通过JavaScript 访问浏览器窗口的一个接口，又是ECMAScript规定的 Global对象。

1、弹出对话框

window.alert(“content”)

显示带有一段消息和一个确认按钮的警告框。
window.confirm(“message”)

显示一个带有指定消息和OK及取消按钮的对话框，返回 true 或 false。
window.prompt(“text”, “defaultText”)
1. text：要在对话框中显示的纯文本
2. defaultText：默认的输入文本
3. 返回值：单击取消按钮，返回null；单击确认按钮，返回输入的文本

<div id="box">
	<span>删掉我</span>
	<input type="button" value="删除" id="btn">
</div>
<script>
	
	// 声明一个全局变量，相当于 window.age=15
	var age=15;
	// 声明一个全局方法，相当于 window.sayAge(){...}
	function sayAge(){
	  alert("I'm "+window.age);
	}
	// 相当于 window.sayAge()
	sayAge();


	var btn=document.getElementById("btn");
	btn.onclick=function(){
	   // 弹出确认对话框
	   var result=window.confirm("您确定要删除吗？删除之后该信息\n将不可恢复！");
	   if(result){
		  document.getElementById("box").style.display="none";
	   }
	}
</script>

2、窗口方法

window.open(pageURL, name, parameters)

打开一个新的浏览器窗口或查找一个已命名的窗口
1. pageURL：子窗口路径
2. name：子窗口句柄
3. parameters：窗口参数（各参数用逗号分隔）
window.close()

关闭浏览器窗口
window.moveTo()

移动当前窗口
window.resizeTo()

调整当前窗口的尺寸

<button onclick="openwindow()">创建窗口</button>
<button onclick="myFunction()">调整窗口</button>
<button onclick="moveFunction()">移动窗口</button>
<button onclick="closeFunction()">关闭窗口</button>

<script type="text/javascript">
	var w;
    // 打开新窗口
	function openwindow(){
		w=window.open('','', 'width=300,height=300');
	}
    // 调整当前窗口的尺寸
	function myFunction(){
		w.resizeTo(500,500);
		w.focus();
	}
    // 移动当前窗口
	function moveFunction(){
		w.moveTo(700,500);
		w.focus();
	}

	// 关闭当前窗口
	function closeFunction(){
		w.close(700,500);
		w.focus();
	}
</script>

3、定时器

超时调用

在指定的毫秒数后调用函数或计算表达式

setTimeout(code, millisec)

code：要调用的函数或要执行的JavaScript代码块
millisec：在执行代码前需等待的毫秒数
setTimeout() 只执行code一次

清除超时调用

取消由setTimeout() 方法设置的 timeout

cleartimeout(id_of_settimeout)

id_of_settimeout：由setTimeout() 返回的ID值

间歇调用

每隔指定的时间执行一次代码

setlnterval(code, millisec)

code：要调用的函数或要执行的JavaScript代码块
millisec：周期调用的时间间隔，以毫秒计

// 字符代码方式
setTimeout("alert('hello')",4000);

// 一般函数方式
setTimeout(fnCall,5000);
var fnCall=function(){ alert("world"); }

// 匿名函数方式
var timeout1=setTimeout(function(){
	alert("hello");
},2000)

// 清除定时器
clearTimeout(timeout1);

// 间隔调用
var num=1, max=10, timer=null;
timer=setInterval(function(){
	console.log(num);
	num++;
 	if(num>max){
		clearInterval(timer);
	}
},1000)

二、Location 对象

Location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是 window对象的属性也是 document 的属性。

1、href、hash

location.href

返回当前加载页面的完整URL，与 window.location.href 等价
location.hash

返回URL中的锚部分（#号后跟零或多个字符），如果不包含则返回空字符串。

<head>
	<style>
       .box1{height:400px;background:#ccc;}
       .box2{height:600px;background:#666;}
	</style>
</head>
<body>
	<div class="box1" id="top"></div>
	<div class="box2"></div>
	<input type="button" id="btn" value="返回顶部">
	<script>
       console.log(location.href);
       console.log(location.hash);
       var btn=document.getElementById("btn");
       btn.onclick=function(){
          location.hash="#top";
       }
       console.log(location.pathname);
	</script>
</body>

2、其他属性

属性	描述
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
portocol	返回一个URL协议
search	返回一个URL的查询部分

3、常用方法

方法	描述
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

三、History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

1、属性

length

历史列表中的网址数

2、方法

方法	描述
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

四、Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

1、常用属性

属性	描述
heigth	返回屏幕的总高度
width	返回屏幕的总宽度
availHeight	返回屏幕的高度（不包括Windows任务栏等）
availWidth	返回屏幕的宽度（不包括Windows任务栏等）