WEB前端第三十六课——jsBOM操作-window、timer
1.BOM基础
BOM（Browser Object Model）即浏览器对象模型
BOM相关说明：
① BOM提供了独立于内容而与浏览器窗口进行交互的对象
② 由于BOM主要用于管理窗口与窗口之间的通信，因此其核心对象是 window对象
③ BOM由一系列相关对象构成，并且每个对象都提供了很多方法与属性
④ BOM缺乏一个统一的标准
JavaScript语法的标准化组织是ECMA
DOM的标准化组织是 W3C（所有浏览器公共遵循的标准）
BOM是各个浏览器厂商根据 DOM在各自浏览器上的实现，表现为不同浏览器定义有差别，实现方式不同
⑤ 通常情况下所说的BOM，一般都是指 window对象
BOM与 DOM的区别与联系
① DOM通过 document对象访问、控制、修改HTML和XHTML等文档中的内容
② BOM通过 window对象来访问、控制、修改浏览器中的内容
③ BOM包含 DOM，用来访问浏览器的是BOM对象，从 BOM对象可以访问到 DOM对象，进而操作浏览器和读写文档内容
④ BOM描述了处理网页内容的方法和接口（操作页面内部），BOM描述了与浏览器进行交互的方法和接口（操作页面之间）
2.window对象
window对象是BOM具象化的表现形式
因为 window对象是 JavaScript中的顶级对象，所有定义在全局作用域中的变量、函数都会变成window对象的属性和方法，
在调用的时候可以省略 window，如下：
打开窗口：window.open(url);
关闭窗口：window.close();
获取事件：window.event;
获取文档：window.document;
3.window对象的name属性
window.name是window对象的一个属性，默认值为空
特性：window.name值在不同的页面（甚至不同域名）加载后依旧存在，且可以支持非常长的 name值（2M左右）
应用：由于window.name属性具有在不同页面保持存在的特性，出现了一门叫作“跨域传输”的技巧，而这个技巧的内部实现原理就是window.name属性的持久性特性。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域传输</title>
</head>
<body>
<script>
var cont=110;
//定义window.name属性值，属性值内的变量可以是任何类型的数据
window.name='var cont=110;';
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域加载</title>
</head>
<body>
<button>跨域加载</button>
<script>
var btn=document.querySelector('button'); //定义一个触发按钮（非必要）
btn.onclick=function () {
var iframe=document.createElement('iframe'); //创建iframe元素作为加载跨域内容的容器
iframe.src = 'test.html'; //通过iframe.src属性将需要跨域加载的文档链接赋值
iframe.style.display='none'; //隐藏iframe框架的界面显示
document.body.appendChild(iframe); //将创建的iframe添加至当前页面body中
// 当iframe加载完毕后，意味着“window.name”的内容已经赋予完毕
iframe.onload=function () {
var iframeContent=event.target.contentWindow.name; //获取iframe中的window.name属性内容
console.log(iframeContent); //直接获取过来的window.name属性值为string形式，不是可执行代码
eval(iframeContent); //通过“eval()”方法将字符串形式的代码转换为可执行代码
console.log(cont);
}
}
</script>
</body>
</html>
4.window对象的尺寸属性
① 浏览器尺寸
window.outerHeight;
window.outerWidth;
这两个属性返回的是整个浏览器的高度和宽度，与页面窗口大小没有任何关系
② 页面窗口尺寸
window.innerHeight;
window.innerWidth;
这两个属性返回的是视口的高度和宽度（计算滚动条的尺寸），跟随页面窗口变化
③ 页面内容尺寸
document.documentElement.clientHeight;
document.documentElement.clientWidth;
这两个属性返回视口的高度和宽度，不计算滚动条的尺寸
④ 页面滚动距离
window.pageXOffset;
window.pageYOffset;
这两个属性指的是页面内容发生滚动的距离，返回值为“滚动距离”
⑤ 浏览器与屏幕距离
window.screenX;
window.screenY;
这两个属性指的是浏览器与屏幕的距离，左上角为各自的（0,0）坐标点
5.window.navigator对象
window.navigator对象包含大量有关Web浏览器的信息，在检测浏览器和操作系统方面非常有用
这个对象和 event一样是一个全局变量，并且是唯一的
常用属性：
navigator.appCodeName；浏览器代码名的字符串表示
navigator.appName；官方浏览器名的字符串表示
navigator.appVersion；浏览器版本信息的字符串表示
navigator.cookieEnable；如果启用cookie返回true，否则返回false
navigator.javaEnable()；如果启用java返回true，否则返回false
navigator.platform；浏览器所在计算机平台的字符串表示
navigator.plugins；安装在浏览器中的插件数组
navigator.userAgent；返回和浏览器内核相关的信息
如果window.navigator.userAgent返回值出现了Mobile，则可以确定用户使用的是移动设备
6.window对象常用方法
alert()；显示带有一段消息和一个确认按钮的提示框
prompt()；显示可提示用户输入的对话框
confirm()；显示带有一段消息以及确认按钮和取消按钮的对话框
open()；打开一个新的浏览器窗口或查找一个已命名的窗口
close()；关闭浏览器窗口
print()；打印当前窗口的内容
focus()；把键盘焦点给予一个窗口
blur()；把键盘焦点从顶层窗口移开
moveBy()；可相对窗口当前坐标移动指定的距离(像素)
moveTo()；把窗口的左上角移动到指定的坐标位置
resizeBy()；按照指定的像素尺寸调整窗口大小
resizeTo()；将窗口的大小调整到指定的宽度和高度
scrollBy()；按照指定的像素值滚动页面内容
scrollTo()；把页面内容滚动到指定的坐标位置
setInterval()；每隔指定的时间执行代码
setTimeOut()；在指定的延迟时间后执行代码
clearInterval()；取消 setInterval设置
clearTimeOut()；取消 setTimeOut设置
7.提示框
① alert ()，
表示警示框，主要用于提示用户信息，该方法执行后无返回值
语法：window.alert(' alertMsg'); //无返回值所以console.log(alert(''));结果为 undefined
alert()方法弹出的对话框是模态对话框，在对话框关闭之前程序暂停，直到关闭后才继续执行
② prompt ()，
表示警示框，主要用于提示并收集用户信息，该方法执行后根据情况不同返回值略有不同
语法：window.prompt ('alertMsg', 'defaultMsg');
点击取消时，返回值为 null
没有设置默认值（defaultMsg）时，
如果用户没有输入内容，确认后返回一个空字符串，取消后返回null
如果用户输入了内容，返回值为用户输入的内容
设置了默认值（defaultMsg）时，
如果用户没有输入内容，则确认后返回默认值
如果用户输入了内容，返回值为用户输入的内容
同样，prompt()方法也是模态对话框，在对话框关闭之前程序暂停，直到关闭后才继续执行
③ confirm()，
表示警示框，主要用于提示用户确认信息，点击确认返回 true，点击取消返回 false
语法：window.confirm(' alertMsg ');
同样，confirm()方法也是模态对话框
一般情况下，通过判断用户做出的选择，作为后续程序执行条件
8.提示框综合案例
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义鼠标右键菜单</title>
<style>
*{margin: 0;padding: 0;}
ul{
width: 130px;
list-style: none;
display: inline-block;
background-color: #cccccc;
position: absolute; /*设置绝对定位以便于跟随焦点坐标显示*/
display: none;
}
li{
height: 30px;
padding: 5px 10px;
line-height: 30px;
}
ul li:hover{
background-color: hotpink;
color: blue;
cursor: pointer;
transition: 0.3s;
}
</style>
</head>
<body>
<!--通过ul>li创建右键菜单列表-->
<ul>
<li>Alert提示</li>
<li>关闭页面</li>
<li>BaiDu选中内容</li>
<li>输入搜索内容</li>
</ul>
<!--在页面中创建一个文本输入区域，第三个li用-->
<textarea cols="100" rows="20" style="font-size: 20px"></textarea>
<script>
var ulMenu=document.querySelector('ul');
var ulOption=document.querySelector('li');
// 禁用系统右键菜单事件“contextmenu”
document.oncontextmenu=function () {
return false; //return false表示事件禁用
}
// 定义鼠标抬起时触发事件
document.onmouseup=function (eve) {
// 通过 event.button属性返回值判断鼠标按键
// console.log(event.button);
// 返回值“0”代表左键，返回值“1”代表滚轮，返回值“2”代表右键,...
if (event.button==2){
ulMenu.style.display='inline-block';
ulMenu.style.left=eve.clientX+'px';
ulMenu.style.top=eve.clientY+'px';
}else{
ulMenu.style.display='none';
}
}
//通过“事件委托”的方式获取触发节点，判断需要执行的操作
ulMenu.onmousedown=function (eve) { //此处必须使用mousedown事件！
if (eve.target.innerHTML=='Alert提示'){
alert('这是alert()方法测试');
}else if (event.target.innerHTML=='关闭页面'){
if (confirm('确定离开了么？')){
window.close();
}
}else if (eve.target.innerHTML=='BaiDu选中内容'){
//使用getSelection()方法获取光标选中的文本内容，返回值为 object
//而搜索使用的是字符串，需要再使用 toString()方法将获取结果转换为字符串
//如果绑定事件为 onclick或 onmouseup时，返回值为空字符串
var textSelect=document.getSelection().toString();
// console.log(textSelect);
open('http://www.baidu.com/s?word='+textSelect);
}else{
var searchText=prompt('请输入你想搜索的内容','比如：美女')
window.open('http://www.baidu.com/s?word='+searchText);
}
}
ulMenu.onmouseleave=function () {
ulMenu.style.display='none';
}
</script>
</body>
</html>
9.知识碎片：
① <textarea>标签
<textarea> 标签表示多行纯文本编辑控件，用户可在其文本区域中写入文本
常用属性：
name，规定文本区域的名称
autofocus，当前页面加载时文本区域自动获取焦点
cols，规定文本区域内可见的列数
rows，规定文本区域内可见的行数
maxlength，规定文本区域允许的最大字符数
placeholder，设置描述性提示，加载时显示在文本区域
readonly，规定文本区域为只读
required，规定文本区域为必填项
wrap，规定提交表单时，区域内文本如何换行，
属性值包括 hard（提交表单时文本换行）、soft（提交表单时文本不换行，默认值）
② contextmenu
在HTML中，该属性规定了元素的上下文菜单，，当用户右击元素时将显示上下文菜单
属性值是需要打开的<menu>元素的 id
语法示例：<div contextmenu="mymenu">
<menu type="context" id="mymenu">
<menuitem label="Refresh"></menuitem>
<menuitem label="Twitter"></menuitem>
</menu>
</div>
oncontextmenu事件，在元素中用户右击鼠标时触发并打开上下文菜单
语法：元素节点 .oncontextmenu=function(){ };
还可以直接在HTML的元素属性中定义该事件，如前面的<div>标签属性可以如下书写：
<div contextmenu="mymenu" oncentextmenu=' myFunction() '>;
③ event.button属性
button 事件属性可返回一个整数，指示当事件被触发时哪个鼠标按键被点击。
④ getSelection()方法
该方法可以返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置
语法：window.document.getSelection();
想要将getSelection()的返回值（对象）转换为字符串，可以通过连接一个空字符串(' ')，或使用 .toString()方法
select()方法，表示全选当前输入的内容
10.间隔调用
间隔调用又被称作定时器，是一种能够每隔一定时间自动执行一次的函数
语法示例：var timer=null;
timer=setInterval { function(){ }，执行间隔时间/ms};
清除间隔调用函数，使用 clearInterval()方法
语法：clearInterval(变量标识);
示例：clearInterval (timer);
注意事项：
① 间隔调用的返回值是一个数字队列，因此，通过访问数字队列来清除间隔调用也是可以的
② 如果间隔调用的函数需要传入参数，则间隔调用不能使用匿名函数，需要使用如下方式声明
var timer=null;
timer=setInterval(' myFunction( 参数值 ) ', 执行间隔时间); //调用函数是“字符串”形式
③ 间隔调用不是立即执行，而是在“任务队列中的任务完成后”才执行间隔调用
④ 因为间隔调用的实际执行者是 window，因此间隔调用函数内部的 this指向的是 window
11.延迟调用
延迟调用是一种在等待一定时间后执行的函数（执行一次）
语法：var timer=null；
timer=setTimeout( function(){ }, 延迟执行时间/ms);
延迟调用函数的用法与间隔调用函数基本相同