JavaScript_6th_BOM编程

最新推荐文章于 2024-07-13 12:41:40 发布

weqpo

最新推荐文章于 2024-07-13 12:41:40 发布

阅读量242

点赞数

分类专栏： JavaScript 文章标签： JavaScript BOM window location history

本文链接：https://blog.csdn.net/weqpo/article/details/63688481

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、窗口中的对象和元素
1、window
1)当前窗口
window.status

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			window.status = "Hello, Please look here!";
		</script>
		<form name="ttt">
			<input type="button" value="test" οnmοuseοver="JavaScript:window.status = 'haha'" />
		</form>
	</body>
</html>

2）新开窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
//			window.open("1.html","newWin",
//			"toolbar=no,left=200,top=100,menubar=no,width=100,height=100,resizable=no");
			window.open("1.html");
		</script>
	</body>
</html>

3）通过本地窗口控制新开窗口

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var abc = window.open("1.html");
		</script>
		<input type="button" οnclick="JavaScript:abc.close();" value="关闭" />
	</body>
</html>

总结：通过open返回的对象调用close()方法，即可实现关闭open()打开的窗口。

2、location
1）获取或设置现有文档的URL

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			alert(window.location);
			//alert(document.location);
		</script>
	</body>
</html>

总结：
①window.location是当前文档的URL。
②document.location与window.location含义一样。

3、history
1)先前访问过的URL的历史列表
2）常用方法：back()，go(number)
3）两个小例子结合在一起：
第一个页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function go2() {
				window.location = "back.html";
			}
		</script>
	</head>
	<body>
		<p>这里是第一个页面</p>
		<input type="button" value="转向" οnclick="JavaScript:go2();" />
	</body>
</html>

第二个页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function goBack() {
				window.location = "go2.html";
			}
		</script>
	</head>
	<body>
		<p>这里是第二个页面</p>
		<input type="button" value="返回" οnclick="JavaScript:goBack();" />
	</body>
</html>

4、document
1）当前的文档对象

document.write()：向客户端浏览器输出内容