JavaScript之浏览器对象(window+location+history+计时)欢迎品鉴o(´^｀)o

最新推荐文章于 2022-08-26 14:39:44 发布

月下赶路人

最新推荐文章于 2022-08-26 14:39:44 发布

阅读量197

点赞数 1

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

本文链接：https://blog.csdn.net/Lotus_dong/article/details/113199184

版权

前端Web 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

- 浏览器对象

浏览器对象

window对象

1.window对象表示浏览器窗口.

2.所有javaScript的全局对象、函数以及变量均会自动成为window对象的成员.

(1)全局变量就是window对象的属性.

(2)全局函数就是window对象的方法.

window对象常用的属性

window.innerHeight:浏览器窗口的内部高度;
window.innerWidth:浏览器窗口的内部宽度;
window.parent:获得父级窗口对象(父子级之间相互调用).

代码示例

<script>
	//获取浏览器窗口的宽高
	console.log(window.innerHeight+":"+window.innerWidth)//610:1280
</script>

父级窗口和子级窗口的使用

//父级窗口
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象常用属性</title>
		<script type="text/javascript">
			//父级窗口函数
			function show(msg){
				document.getElementById("father").innerHTML = msg;
			}
		</script>
	</head>
	<body>
		父级窗口
		<div id="father">
			
		</div>
		<iframe src="BOM_1_child.html" width="500px" height="200px">
			
		</iframe>
	</body>
</html>

//子级窗口
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子级窗口</title>
		<script type="text/javascript">
			//将子级窗口输入的文本输入到父级窗口的div中		
			function send(){
				var msg = document.getElementById("childId").value;
				window.parent.document.getElementById("father").innerHTML = msg;
				//获得父级窗口对象
				console.log(window.parent);
				//获得父级窗口的文档对象
				console.log(window.parent.document);
				//调用父级窗口的方法
				window.parent.show(msg);
			}
		</script>
	</head>
	<body>
		子级窗口
		<input type="text" id="childId"  value="" />
		<input type="button" id="btn" value="操作" onclick="send()" />
	</body>
</html>

在这里插入图片描述

window对象常用方法

window.open("url","name","feature") 打开新窗口
url:新窗口地址;
feature:可选字符串,声明了新窗口要显示的标准浏览器的特征,参数有width=宽,height=高,left=偏移量,top=偏移量.

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>window对象常用方法</title>
		<script type="text/javascript">
			function openWin(e){
				var x = e.screenX;//获得鼠标点击事件处相对于屏幕的水平偏移量
				var y = e.screenY;//获得事件相对于屏幕的垂直偏移量
				//新窗口会在鼠标点击处显示
				window.open("http://www.baidu.com","新窗口百度","width=200px,height=200px,left="+x+",top="+y);
			}
		</script>
	</head>
	<body>
		<div style="width: 300px;height: 200px;background-color: #2493FF;">
			
		</div>
		<input type="button" value="打开" onclick="openWin(event)" />
	</body>
</html>

Location对象

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

属性

href设置或返回完整的URL;

代码示例

<script type="text/javascript">
	//获得当前页面地址
	console.log(location.href);
	//10s后跳转到新页面
	setTimeout(function(){
		location.href = "http://www.baidu.com";
	},"10000")
</script>

方法

assign(url):加载一个新页面;
reload():重新加载当前页面;
replace(url):使用一个新的页面替换当前页面,不可回退.

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>location</title>
		<script type="text/javascript">
			function a(){
				location.assign("child.html");//加载一个新页面
			}
			function c1(){
				location.reload();//重新加载当前页面
			}
			function c2(){
				location.replace("child.html");//使用新的页面替换当前页面,不可回退
			}
			console.log(history.length);
		</script>
	</head>
	<body>
		<input type="button" value="assign" onclick="a()" />
		<input type="button" value="reload" onclick="c1()" />
		<input type="button" value="replace" onclick="c2()" />
		
		<input type="button" value="前进" onclick="history.forward()" />
	</body>
</html>

history对象

history对象包含浏览器的历史;

属性

length:返回浏览器历史列表中的URL数量

方法

back():与在浏览器中点击后退按钮的功能相同;
forward():与在浏览器中点击前进按钮的功能相同;

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history对象</title>
		<script type="text/javascript">
			console.log(history.length);
		</script>
	</head>
	<body>
		<input type="button" value="前进" onclick="history.forward()" />
		<input type="button" value="后退" onclick="history.back()" />
	</body>
</html>

计时

通过JavaScript我们可以完成一个在设定时间间隔后来执行代码,而不是在函数被调用时直接执行,这样的事件我们称为计时事件.

setTimeout("函数","时间t"):时间间隔t后执行函数;
clearTimeout():取消setTimeout;
setInterval("函数","时间t"):每经过t时间后就调用一次函数;
clearInterval():取消setInterval().

代码示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计时</title>
		<script type="text/javascript">
			var t;
			function start(){
				//t = setTimeout("test()",5000)//定时器,让指定函数在指定时间后调用 5000毫秒
				t = setInterval("test()","3000")//每隔指定时间重复调用

			}
			function stop(){
				// clearTimeout(t);//关闭setTimeout
				clearInterval(t);//关闭setInterval
			}
			function test(){
				alert();
			}
		</script>
		
	</head>
	<body>
		<input type="button" value="开始" onclick="start()" />
		<input type="button" value="取消" onclick="stop()" />
	</body>
</html>

月下赶路人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之浏览器对象(window+location+history+计时)欢迎品鉴o(´^｀)o

文章目录浏览器对象window对象window对象常用的属性window对象常用方法Location对象属性方法history对象属性方法计时浏览器对象window对象1.window对象表示浏览器窗口.2.所有javaScript的全局对象、函数以及变量均会自动成为window对象的成员.(1)全局变量就是window对象的属性.(2)全局函数就是window对象的方法.window对象常用的属性window.innerHeight:浏览器窗口的内部高度;window.innerWidt
复制链接

扫一扫