> 文档中心 > JavaScript学习笔记(BOM编程案例)

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;}

JavaScript学习笔记(BOM编程案例) 创作打卡挑战赛 JavaScript学习笔记(BOM编程案例) 赢取流量/现金/CSDN周边激励大奖