JavaScriptBOM_打开关闭窗口_单击事件（十九）
2019-11-27 本文已影响0人
终身成长人格
目录：
1.什么是BOM
2.单击事件
3.打开和关闭窗口
一、什么是BOM
1.BOM（Browser Object Model）即浏览器对象模型。
BOM提供了独立于内容 而与浏览器窗口进行交互的对象；
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
2.常见的BOM对象
window：代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）
Navigator ：代表浏览器当前的信息，通过Navigator我们可以获取用户当前使用的是什么浏览器
Location： 代表浏览器当前的地址信息，通过Location我们可以获取或者设置当前的地址信息
History：代表浏览器的历史信息，通过History我们可以实现上一步/刷新/下一步操作（出于
对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）
Screen：代表用户的屏幕信息
3.BOM结构图
image
二、单击事件（简单了解，不属于bom，但是提前尝鲜）
1.场景：我们点击一个按钮，弹出123
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button id='btn'>按钮</button>
<script type="text/javascript">
btn.onclick = function(){
alert(123);
}
</script>
</body>
</html>
2.说明:
btn是一个id号
btn.onclick可以理解成：btn这个id 的 点击事件
=function(){ alert(123); }可以理解成：给前面的赋值一个 匿名函数 ，匿名函数内执行了alert(123); 的操作
三、打开和关闭窗口
1.打开：open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口
2.关闭：close()方法：关闭一个窗口。
案例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" value="打开窗口">
<input type="button" value="关闭窗口">
<input type="button" value="关闭新窗口">
<script type="text/javascript">
window.onload = function() {
var aInput = document.getElementsByTagName('input');
var opener = null;
aInput[0].onclick = function() {
//open(地址默认是空白页面，打开方式默认新窗口) 打开一个新窗口
window.open('http://www.3mooc.com', '_self');
opener = window.open();//返回值 返回的新开页面的window对象
//alert(opener == window)
//opener.document.body.style.background = '#CCC';
};
aInput[1].onclick = function() {
window.close();
/*
ff : 无法关闭
chrome : 直接关闭
ie : 询问用户
*/
};
aInput[2].onclick = function() {
opener.close(); //可以通过关闭用window.open方法打开的窗口
};
};
</script>
</body>
</html>
