【JavaScript】笔记(6)--- BOM(open 与 close;弹出消息框和确认框;将窗口设置为顶级窗口;history 对象;设置浏览器地址栏上的URL)
2022/2/10 20:19:45
本文主要是介绍【JavaScript】笔记(6)--- BOM(open 与 close;弹出消息框和确认框;将窗口设置为顶级窗口;history 对象;设置浏览器地址栏上的URL),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
楔子:
1、BOM 编程中,window对象是顶级对象,代表浏览器窗口。
2、window 有 open 和 close 方法,可以开启窗口和关闭窗口。
一、open 与 close:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>BOM编程-open和close</title> </head> <body> <!-- 也可以open本地的html文件 --> <!-- 默认是新窗口 --> <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" /> <input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" /> <input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" /> <input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" /> <input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" /> <input type="button" value="关闭当前窗口" onclick="window.close();" /> </body> </html>
二、弹出消息框和确认框:
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>弹出消息框和确认框</title> </head> <body> <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>
三、将窗口设置为顶级窗口:
顶级窗口的html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>顶级窗口</title> </head> <body> <!-- 子窗口为咱们自己写的本地html文件 --> <iframe src="015.html"></iframe> </body> </html>
子窗口的html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>子窗口</title> </head> <body> <script type="text/javascript"> //将此窗口设置为顶级窗口 function jump(){ if(window.top != window.self){ window.top.location = window.self.location; } } </script> <br /> <!-- 点击按钮,执行jump()函数 --> <input type="button" value="跳转为顶级窗口" onclick="jump()" /> </body> </html>
四、history 对象:
最初的html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>最初的页面</title> </head> <body> <a href="001.html">跳转到有后退按钮的页面</a> <!-- 前进代码: --> <input type="button" value="前进" onclick="window.history.go(1)"/> </body> </html>
跳转后的html:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跳转后的页面</title> </head> <body> <!-- 让页面倒退的两种代码: --> <input type="button" value="后退" onclick="window.history.go(-1)"/> <input type="button" value="后退" onclick="window.history.back()"/> </body> </html>
五、设置浏览器地址栏上的URL:
总结,有哪些方法可以通过浏览器往服务器发请求?
1、表单form的提交。
2、超链接。<a href="http://localhost:8080/oa/save?username=zhangsan&password=123">用户只能点击这个超链接</a>
3、document.location
4、window.location
5、window.open("url")
6、直接在浏览器地址栏上输入URL,然后回车(这个也可以手动输入,提交数据也可以成为动态的)。
以上所有的请求方式均可以携带数据给服务器,只有通过表单提交的数据才是动态的。
代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>设置浏览器地址栏上的URL</title> </head> <body> <script type="text/javascript"> function goBaidu(){ /* 第一种写法 window.location.href = "http://www.baidu.com"; */ /* 第二种写法 window.location = "http://www.baidu.com"; */ /* 第三种写法 document.location.href = "http://www.baidu.com"; */ // 第四种写法: document.location = "http://www.baidu.com"; } </script> <input type="button" value="百度1" onclick="goBaidu();"/> <!-- 第五种写法 --> <input type="button" value="百度2" onclick="window.open('http://www.baidu.com');" /> </body> </html>
这篇关于【JavaScript】笔记(6)--- BOM(open 与 close;弹出消息框和确认框;将窗口设置为顶级窗口;history 对象;设置浏览器地址栏上的URL)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)