菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
0
0

JavaScript学习笔记(BOM编程案例)

原创
05/13 14:22
阅读数 165

1.window中的open、close、alert、confirm方法

在BOM编程中,顶级对象是window,window有open方法可以开启窗口,close方法关闭窗口,alert是弹出消息框,confirm会弹出一个确认框。话不多说,上代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>BOM编程实例</title>
	</head>
	<body>
		
		<!-- 1.window.open()中的第二个参数表示了在哪里打开新页面,默认方式是_blank(新窗口) -->
		<input type="button" value="跳转百度(当前窗口)" onclick="window.open('https://www.baidu.com','_self');"/>
		<input type="button" value="跳转百度(新窗口)" onclick="window.open('https://www.baidu.com','_blank');"/>
		<input type="button" value="跳转百度(父窗口)" onclick="window.open('https://www.baidu.com','_parent');"/>
		<input type="button" value="跳转百度(顶级窗口)" onclick="window.open('https://www.baidu.com,'_top');"/>
		
		<!-- 2.window.close()方法会关闭当前页面 -->
		<input type="button" value="关闭页面" onclick="window.close()" />
		
		<!-- 3.window.confirm()方法会返回一个true或者false,用户点击确定就是true,反之则是false -->
		<script type="text/javascript">
			function del(){
			    if(window.confirm("确认删除数据吗?")){
			    	alert("delete data ....");
			    }
			}
		</script>
		<input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />
		
		<!--删除操作的时候都要提前先得到用户的确认。-->
		<input type="button" value="弹出确认框(删除)" onclick="del();" />
	</body>
</html>

2.history和location

2.1 history中的back和go方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>history对象</title>
	</head>
	<body>
		<a href="链接">007页面</a>
		<input type="button" value="后退" onclick="window.history.back()"/> 
		<input type="button" value="后退" onclick="window.history.go(-1)"/> 
		<input type="button" value="前进" onclick="window.history.go(1)"/> 
	</body>
</html>

back方法会跳转上一个页面,go方法可以历史中的多个页面跳转。例如上面代码中,go(-1)就是返回上一个页面,go(1)是跳转下一个页面。

2.2 location的href属性

<script type="text/javascript">
	function golink(){	
        //这些方式都可以设置链接
		// window.location.href = "http://www.jd.com";
		// window.location = "http://www.126.com";		
		//document.location.href = "http://www.sina.com.cn";
		document.location = "http://www.tmall.com";
	}
</script>
		
<input type="button" value="新浪" onclick="golink();"/>

总结,有哪些方法可以通过浏览器往服务器发请求?
1、表单form的提交。
2、超链接。
3、document.location
4、window.location
5、window.open(“url”)
6、直接在浏览器地址栏上输入URL,然后回车。(这个也可以手动输入,提交数据也可以成为动态的。)

以上所有的请求方式均可以携带数据给服务器,只有通过表单提交的数据才是动态的。

2.3 设置当前窗口为顶级窗口

if(window.top != window.self){
    window.top.location = window.self.location;
}

发表评论

0/200
0 点赞
0 评论
收藏