网站导航
> 文章列表 > JavaScript基础04 - BOM编程

JavaScript基础04 - BOM编程

网友: 文章列表 2024-03-21 19:53:46

JavaScript基础04 - BOM编程

JavaScript基础04

  • 001-BOM编程
  • 002-open
  • 003-弹出消息框和确认框
  • 004-将当前窗口设置为顶级窗口
  • 005
  • 006-history对象
  • 007
  • 008-设置浏览器地址栏上的URL

001-BOM编程

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>BOM编程</title></head><body><script type="text/javascript">/*1、BOM编程中，window对象是顶级对象，代表浏览器窗口。2、window有open和close方法，可以开启窗口和关闭窗口。*/</script><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.open('002-open.html')"/></body>
</html>

002-open

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>close</title></head><body><input type="button" value="关闭当前窗口" onclick='window.close()';/></body>
</html>

003-弹出消息框和确认框

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>弹出消息框和确认框</title></head><body><script type="text/javascript">function del(){/*var ok = window.confirm("亲，确认删除数据吗？");//alert(ok);if(ok){alert("del data...");}*/if(window.confirm("亲，确认删除数据吗？")){alert("del data...");}}</script><input type="button" value="弹出消息框" onclick="window.alert('消息框')"/><!-- 删除操作的时候都要提前先得到用户的确认。 --><input type="button" value="弹出确认框（删除）" onclick="del()"/></body>
</html>

004-将当前窗口设置为顶级窗口

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>将当前窗口设置为顶级窗口</title></head><body><script type="text/javascript">/*如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口。*/</script><iframe src="005.html" width="500px" height="500px"> </iframe></body></html>

005

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>005</title></head><body>005页面<br><script type="text/javascript">/*如果当前这个窗口不是顶级窗口的话，将当前窗口设置为顶级窗口。*/function setTop(){// window是当前浏览器窗口，代表005.html// 当前窗口的顶级窗口如果不是自己// window.top就是当前窗口对应的顶级窗口// window.self表示当前自己这个窗口// window.top就是004窗口// window.self是005窗口console.log(window.top != window.self);if(window.top != window.self){// 将当前窗口设置为顶级窗口// window.self.location 是005的地址// 将顶级窗口的window.top.location地址设置为005window.top.location = window.self.location;}}</script><input type="button" onclick="setTop()" value="如果当前窗口不是顶级窗口的话，将当前窗口设置为顶级窗口"/></body>
</html>

006-history对象

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

007

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>007</title></head><body>007 page!<input type="button" value="后退" onclick="window.history.back()"/><input type="button" value="后退" onclick="window.history.go(-1)"/></body>
</html>

008-设置浏览器地址栏上的URL

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>设置浏览器地址栏上的URL</title></head><body><script type="text/javascript">function goBaidu(){//var locationObj = window.location;//locationObj.href = "http://www.baidu.com";// window.location.herf = "http://www.baidu.com";// window.location = "http://www.126.com";//document.location.href = "http://www.sina.com.cn";document.location = "http://www.sina.com.cn";}</script><input type="button" value="新浪" onclick="goBaidu()"/><input type="button" value="百度" onclick="window.open('http://www.baidu.com');"/></body></html><!--总结，有哪些方法可以通过浏览器向服务器发送请求？1、表单form的提交2、超链接 <a href="http://localhost:8080/oa/save/username=zhangsan&password=123">用户只能点击这个超链接</a>3、document.location4、window.location5、window.open("url");6、直接在浏览器地址栏上输入URL，然后回车。(这个也可以手动输入，提交的数据也可以成为动态的。)比如地址栏上直接输入：http://www.jd.com/login.do?username=zhangsan&password=123以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的。
-->
网络标签：

相关问题