JS代码：BOM浏览器对象

最新推荐文章于 2022-07-28 20:47:00 发布

hahahafree

最新推荐文章于 2022-07-28 20:47:00 发布

阅读量125

点赞数

分类专栏： JavaScript Web 文章标签： JS

本文链接：https://blog.csdn.net/weixin_43731793/article/details/96696648

版权

Web 同时被 2 个专栏收录

80 篇文章 0 订阅

订阅专栏

JavaScript

23 篇文章 0 订阅

订阅专栏

BOM浏览器对象(browser object model):

1.window对象(窗口对象)
2.navigator对象(浏览器特性)
3.screen对象(客户端屏幕)
4.history对象(历史对象)
5.location对象(地址栏)
6.document对象(文档对象)

1、 window对象:

1.属性
frames
opener #被淘汰
top

2.方法
open(); #被淘汰
alert();
confirm();
prompt();
setInterval();
clearInterval();
setTimeout();
clearTimeout();

2、navigator对象:

1.属性
userAgent

3、screen屏幕对象:

1.属性
1)width
2)height
3)availWidth
4)availHeight

4、history对象:

1.方法
back();
forward();
go(1或-1);

5、location地址栏对象:

1.属性
1)hash //获取url里的锚点#abc
2)host //主机名
3)href //当前的url地址
4)pathname //index.html 页面的名称
5)protocol //协议 http://
6)search //参数 ?id=10&name=user1

#注: 一般情况下我们改变地址栏中的地址时，直接使用location=‘http://www.baidu.com’，而不用location.href=‘http://www.baidu.com’;

2.方法
reload();

用a链接打开新窗口

<body>
	<h1><a href='http://www.baidu.com' target='_blank'>html5</a> is very much!</h1>

	<form action="get.php" target='_blank'>
		<p>用户名:</p>
		<p><input type="text"></p>
		<p>
			<input type="submit" value="ok">
		</p>
	</form>

	<a href='javascript:' target='_blank' id='aid'>
		<img src="cai.png">
	</a>
</body>
<script>
aidobj=document.getElementById('aid');

aidobj.onclick=function(){
	this.href='http://www.baidu.com';
}
</script>

属性frames
index.html

<frameset rows='60,*'>
	<frame src='top.html'>
	<frameset cols='60,*'>
		<frame src='left.html'>
		<frame src='right.html'>
	</frameset>
</frameset>

top.html

<body>
	<button id='left'>left</button>
	<button id='right'>right</button>
</body>
<script>
leftobj=document.getElementById('left');
rightobj=document.getElementById('right');

leftobj.onclick=function(){
	ws=window.top.frames;
	ws[1].document.body.style.background='#00f';
}

rightobj.onclick=function(){
	ws=window.top.frames;
	ws[2].document.body.style.background='#f00';
}
</script>

left.html

<body>
	<h2>left</h2>	
</body>

right.html

<body>
	<h2>right</h2>	
</body>

属性top
index.html

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		*{
			font-family:微软雅黑;
		}		
	</style>
</head>
<frameset rows='60,*'>
	<frame src='top.html'>
	<frameset cols='60,*'>
		<frame src='left.html'>
		<frame src='right.html'>
	</frameset>
</frameset>
</html>

top.html

<body>
	<button id='quit'>退出</button>
</body>
<script>
quitobj=document.getElementById('quit');

quitobj.onclick=function(){
	window.top.location='login.html';
}
</script>

login.html

<body>
	<h2>用户登录:</h2>
	<form action="">
		<p>用户名:</p>
		<p><input type="text"></p>
		<p>密码:</p>
		<p><input type="text"></p>
		<p>
			<input type="submit" value="ok">
		</p>
	</form>
</body>

navigator浏览器特性

<script>
//判断浏览器

nav=navigator.userAgent;

mt=nav.match(/chrome|firefox|trident/i);

switch(mt[0]){
	case 'Chrome':
		document.body.style.background='#f00';
		break;

	case 'Firefox':
		document.body.style.background='#00f';
		break;

	case 'Trident':
		document.body.style.background='#0f0';
		break;
}
</script>

有效的屏幕分辨率

<script>
//浏览器所在屏幕分辨率

sw=screen.availWidth;
sh=screen.availHeight;
alert(sw+'*'+sh);

</script>

forward历史前进

<body>
	<h2>
		<a href="index2.html">index1111页面</a>
	</h2>
	<h2>
		<button id='btn'>前进</button>
	</h2>
</body>
<script>
btnobj=document.getElementById('btn');

btnobj.onclick=function(){
	history.forward();
}
</script>

back历史后退

<body>
	<h2>
		<a href="index.html" id='aid'>index22222</a>
	</h2>
	<h2>
		<button id='btn'>后退</button>
	</h2>
</body>
<script>
btnobj=document.getElementById('btn');

btnobj.onclick=function(){
	history.back();
}
</script>

go可以操作历史的前进和后退

<body>
	<h2>
		<a href="index2.html">index1111页面</a>
	</h2>
	<h2>
		<button id='btn'>前进</button>
	</h2>
</body>
<script>
btnobj=document.getElementById('btn');

btnobj.onclick=function(){
	history.go(1);
}
</script>

go可以操作历史的前进和后退

<script>
btnobj=document.getElementById('btn');

btnobj.onclick=function(){
	history.go(-1);
}
</script>

reload刷新当前页面

<body>
	<h2>
		<script>
			tobj=new Date();
			document.write(tobj.toLocaleString());
		</script>
	</h2>
	<h2>
		<button id='btn'>刷新</button>
	</h2>
</body>
<script>
btnobj=document.getElementById('btn');

btnobj.onclick=function(){
	location.reload();
}
</script>

location的所有属性

<script>
// alert(location.hash);
// alert(location.host);
// alert(location.href);
// alert(location.pathname);
// alert(location.protocol);
alert(location.search);
</script>

location改变地址栏

<script>
btnobj=document.getElementById('btn');

btnobj.onclick=function(){
	location='http://www.baidu.com';
}
</script>

hahahafree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS代码：BOM浏览器对象

BOM浏览器对象(browser object model):1.window对象(窗口对象)2.navigator对象(浏览器特性)3.screen对象(客户端屏幕)4.history对象(历史对象)5.location对象(地址栏)6.document对象(文档对象)1、 window对象:1.属性framesopener #被淘汰top2.方法open(); #被...
复制链接

扫一扫