JS-BOM编程
2021/8/8 20:06:45
本文主要是介绍JS-BOM编程，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
JS-BOM编程
1.开启和关闭窗口
BOM编程中，window对象是顶级对象，代表浏览器窗口。
window有open和close两个函数，可以开启窗口和关闭窗口。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>open和close</title>
</head>
<body>
<!-- 调用open函数，打开窗口 -->
<input type="button" value="打开百度(默认新窗口)" onclick="window.open('https://www.baidu.com/')">
<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.open('open.html')">
</body>
</html>
被打开的本地文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>open</title>
</head>
<body>
<p>Hello</p>
<!-- 调用close函数，关闭当前窗口 -->
<input type="button" value="关闭窗口" onclick="window.close()">
</body>
</html>
2.弹出消息框和确认框
弹出消息框：window.alert("消息")
弹出确认框：window.confirm("描述信息")
调用完confirm函数后会返回一个值：
- 如果用户点击的是确认，值为true。
- 反之值为false。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出确认框</title>
</head>
<body>
<script type="text/javascript">
var del = function() {
var ok = window.confirm("确认删除吗？");
if(ok) {
alert("delete date...");
}
}
</script>
<input type="button" value="弹出消息框" onclick="window.alert('消息')"><br>
<input type="button" value="弹出确认框" onclick="window.del()">
</body>
</html>
3.将当前窗口设为顶级窗口
当一个用户登录一个网站后，如果长时间不进行操作，登录会超时。
这时，如果用户回来想接着操作，当点击页面时，页面会跳转到登录界面让用户重新登录。
如果没有特殊设置，登录界面会显示在超时页面的工作区，但在工作区显示登录页面会显得比较突兀，
这时，我们就可以将显示在工作区的登录页面设为顶级窗口。
代码实现：
原顶级窗口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>将当前窗口设为顶级窗口</title>
</head>
<body>
<h3>顶级窗口</h3>
<!-- 嵌入子窗口 -->
<iframe src="child-window.html" width="600px" height="300px">
</body>
</html>
子窗口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出确认框</title>
<style type="text/css">
/* 设置子窗口背景颜色 */
* {
background-color: aqua;
}
</style>
</head>
<body>
<script type="text/javascript">
//如果当前窗口不是顶级窗口，设置为顶级窗口
toTop = function() {
if(window.top != window.self) {
window.top.location = window.self.location;
}
}
</script>
<h3>当前窗口</h3>
<!-- 点击按钮调用toTop函数 -->
<input type="button" value="设为顶级窗口" onclick="toTop()">
</body>
</html>
4.窗口前进和后退
开始窗口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前进和后退</title>
<style type="text/css">
/*设置链接字体*/
a {
font-size: 20px;
}
</style>
</head>
<body>
<!-- 新页面链接 -->
<a href="son/new-window.html">new-window</a>
<!-- 前进 -->
<input type="button" value="前进" onclick="window.history.go(1)">
</body>
</html>
新窗口：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new-window</title>
</head>
<body>
<!-- 后退方式1：调用back()函数 -->
<input type="button" value="后退1" onclick="window.history.back()">
<!-- 后退方式2：调用go()函数 -->
<input type="button" value="后退2" onclick="window.history.go(-1)">
</body>
</html>
5.设置地址栏的url
可以通过设置window.location或者document.location对象的href来设置地址栏的url。
window.location对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
document.location也可以获得并设置当前页面的url。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置地址栏的url</title>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
var toBaidu1 = function() {
// var locationObj = window.location;
// locationObj.href = "http://www.baidu.com";
window.location.href = "http://www.baidu.com";
}
var toBaidu2 = function() {
//可以忽略href
window.location = "http://www.baidu.com";
}
var toBaidu3 = function() {
//document也可以
//document.location.href = "http://www.baidu.com";
document.location = "http://www.baidu.com";
}
</script>
<input type="button" value="百度1" onclick="toBaidu1()">
<input type="button" value="百度2" onclick="toBaidu2()">
<input type="button" value="百度3" onclick="toBaidu3()">
</body>
</html>
6.总结
-
开启和关闭窗口：
- window.open('url')
- window.close()
-
弹出确认框：
-
if(window.confirm("是否删除？")) { //删除操作 }
-
-
将当前窗口设为顶级窗口：
-
setTop = function() { if(window.top != window.self) { window.top.location = window.self.location; } }
-
-
窗口前进和后退：
- 前进：window.history.go(1)
- 后退：window.history.back()
-
设置地址栏url:
- 表单
- 直接在地址栏手写url
- 超链接
- window.location.href = "url";
- document.location = "url";
- window.open("url")
- 以上所有方式都可以携带数据，但只有表单和直接在地址栏手写url是动态的，输入什么数据，就提交什么数据，其他方式都把数据写死了。
这篇关于JS-BOM编程的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-21Vue3教程：新手入门到实践应用
- 2024-12-21VueRouter4教程：从入门到实践
- 2024-12-20Vue3项目实战：从入门到上手
- 2024-12-20Vue3项目实战：新手入门教程
- 2024-12-20VueRouter4项目实战：新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系？-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程：从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4：基础教程
- 2024-12-20Vuex4课程：新手入门到上手实战全攻略
