JavaScript学习笔记(BOM编程案例)
文章目录
- 1.window中的open、close、alert、confirm方法
- 2.history和location
-
- 2.1 history中的back和go方法
-
- 2.2 location的href属性
- 2.3 设置当前窗口为顶级窗口
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><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');"/><input type="button" value="关闭页面" onclick="window.close()" /><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;}
创作打卡挑战赛
赢取流量/现金/CSDN周边激励大奖