文章目录
一.概述
BOM编程主要指允许JavaScript与浏览器进行对话。
Window 对象
- 所有浏览器都支持 window 对象。它代表浏览器的窗口。
- 所有全局 JavaScript 对象,函数和变量自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
- 甚至(HTML DOM 的)document 对象也是 window 对象属性:
二.弹出框
警告框:
window.alert(“sometext”);
确认框:
window.confirm(“sometext”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.alert("Hello World");//提示框
var r = confirm("请按按钮");//确认框
if (r == true) {
x = "您按了确认!";
} else {
x = "您按了取消!";
}
</script>
</body>
</html>
提示框:
window.prompt(“sometext”,“defaultText”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
window.onload = function(){
document.getElementById("button").onclick = function(){
//提示框
var person = prompt("请输入姓名:","Jack");
var txt;
if (person == null || person === "") {
txt = "用户取消输入";
}
else {
txt = "你好," + person + "!今天过得好吗?";
}
document.getElementById("demo").innerHTML = txt;
}
}
</script>
<input type = "button" id = "button" value = "请点击按钮"/>
<p id = "demo"></p>
</body>
</html>
三.窗口
打开窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type = "text/javascript">
</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'"/>
</body>
</html>
打开一个弹窗的语法是 window.open(url, name, params):
url
要在新窗口中加载的 URL。name
新窗口的名称。每个窗口都有一个 window.name,在这里我们可以指定哪个窗口用于弹窗。如果已经有一个这样名字的窗口 —— 将在该窗口打开给定的 URL,否则会打开一个新窗口。params
新窗口的配置字符串。它包括设置,用逗号分隔。参数之间不能有空格,例如:width=200,height=100。params 的设置项:
位置:
left/top(数字)—— 屏幕上窗口的左上角的坐标。这有一个限制:不能将新窗口置于屏幕外》》 (offscreen)。
width/height(数字)—— 新窗口的宽度和高度。宽度/高度的最小值是有限制的,因此不可能创建一个不可见的窗口。
窗口功能:
menubar(yes/no)—— 显示或隐藏新窗口的浏览器菜单。
toolbar(yes/no)—— 显示或隐藏新窗口的浏览器导航栏(后退,前进,重新加载等)。
location(yes/no)—— 显示或隐藏新窗口的 URL 字段。Firefox 和 IE 浏览器不允许默认隐藏它。
status(yes/no)—— 显示或隐藏状态栏。同样,大多数浏览器都强制显示它。
resizable(yes/no)—— 允许禁用新窗口大小调整。不建议使用。
scrollbars(yes/no)—— 允许禁用新窗口的滚动条。不建议使用。
关闭窗口
关闭一个弹窗的语法是 window.open( );
四.Location
Window Location
window.location 对象可不带 window 前缀书写。
一些例子:
window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议(http: 或 https:)
window.location.assign 加载新文档
五.History
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮