这是第30篇笔记！
让学习“上瘾”，成为更好的自己！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>window对象</title>
<script>
/*
BOM 提供了很多对象，用以访问浏览器的功能，跟任何网页内容无关
BOM的核心就是window对象
window对象既是通过JavaScript访问浏览器窗口的一个接口，也是ECMAScript规定的Global对象
在网页中定义的任何对象、变量和函数，都是以window对象作为其Global对象！！！
1，全局作用域
2，窗口关系和框架
a, 如果页面中包含框架，则每个框架都有自己的window对象，并且保存在frames集合中
b, 可以通过数值索引（从0开始，从左到右，从上到下）或者框架的名称来访问相应的window对象
c, 每个window对象都有一个name属性，其中包含框架的名称
除非最高层窗口是通过window.open()打开，否则window对象的name属性不会包含任何值
d, 所有的包含在框架中的对象都是window对象的属性，可以通过window.parent, window.top等形式访问
f, 每个框架都有一套自己的构造函数，这些构造函数一一对应，但彼此不相等
3，窗口位置（见下）
4，窗口大小（见下）
5，导航和打开窗口（见下）
6，间歇调用 和 超时调用
7，系统对话框（见下）
*/
// 1，全局作用域
// 【注意】全局变量不能通过delete操作符删除，而直接定义在window对象上的属性可以被删除
var age = 29; //age在全局作用域中定义，所以是全局变量
window.color = 'red';
delete window.age; // false
delete window.color; // true
// console.log(window.age); // 29
// console.log(window.color); // undefined
// function getAge(){
// alert(age);
// }
// 测试全局和局部变量
// // getAge();
// function modAge(){
// // age = 21; // 全局变量
// var age = 21;
// return age;
// }
// console.log(modAge());
// console.log(age);
// 尝试访问未声明的变量会抛出错误，而通过查询window对象，可以知道某个可能未声明的变量是否存在
// 错误
// var newValue = oldValue;
// 不会错误，因为这是一次属性查询
// var newValue = window.oldValue; // newValue 的值为undefined
// 3，窗口位置
// 跨浏览器取得窗口左边和上边的位置（相对于电脑屏幕）
// var leftPos = (typeof window.screenLeft == 'number')? window.screenLeft : window.screenX;
// var topPos = (typeof window.screenTop == 'number')? window.screenTop : window.screenY;
// 问题：无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值
// 而使用moveTo() and moveBy() 可能实现将窗口精确地移动到一个新的位置
// moveTo(x, y): 接收新位置的x and y
// moveBy(h, v): 接收在水平和垂直方向上移动的像素值
// window.moveTo(0, 100); // 将窗口向下移动100px
// window.moveBy(-50, 0); // 将窗口向左移动50px
// 【注意】 这两个方法有可能会被禁用，不适合框架，只能对最外层的window对象使用
// 4，窗口大小
// 最终无法确定浏览器窗口本身的大小，但可以取得页面视口的大小
// resizeTo() and resizeBy() --> 调整浏览器窗口大小
// resizeTo() : 接收浏览器窗口的新宽度和新高度
// resizeBy() : 接收新窗口和原窗口的宽度和高度之差
// window.resizeTo(100, 100); // 调整到 100 与 100
// window.resizeBy(100, 50); // 调整到 200 与 150
// 【注意】 这两个方法有可能会被禁用，不适合框架，只能对最外层的window对象使用
// 5，导航和打开窗口
// window.open()： 接收4个参数，要加载的URL，窗口目标，一个特性字符串，以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值
// 通常只传递第一个参数，最后一个参数只在不打开新窗口的情况下使用
// 等同于<a href="https://taobao.com" target="topFrame">
// window.open('https://taobao.com', 'topFrame');
// a, 弹出窗口
// (1)如果第二个参数不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置传入的字符串创建一个新窗口或者新标签页
// 如果没有传入第三个参数，那么就会打开一个带有全部默认设置（工具栏， 地址栏和状态栏）的新浏览器窗口
// 在不打开新窗口的情况下，会忽略第三个参数
// 第三个参数是一个逗号分隔的设置字符串
// 字符串中不能出现空格
// window.open('https://www.worx.com', 'wroxWindow','height=400,width=121,top=10,left=34,resizable= yes');
// (2)window.open()返回一个指向新窗口的引用，引用的对象与其他window对象大致相似，但可以进行更多的控制
// 例如调整创建窗口的大小或位置
// var windowWin = window.open('https://www.worx.com', 'wroxWindow','height=400,width=121,top=10,left=34,resizable= yes');
// windowWin.resizeTo(500, 500);
// windowWin.resizeBy(100, 40);
// windowWin.close(); // 关闭新打开的窗口
// (3)新创建的window对象有一个opener属性，保存打开它的原始窗口对象
// 这个属性只在弹出窗口的最外层window对象(top)中有定义，而且指向调用window.open()的窗口或框架
// (4) 有些浏览器（IE ， Chrome）会在独立的进程中运行每个标签页。
// 当一个标签页打开另一个标签页时，如果两个window对象之间需要彼此通信，那么新标签页就不能运行在独立的进程中
// 在Chrome中，将新创建的标签页的opener属性设置为null, 则可以在单独的进程中运行新标签页
// var windowWin = window.open('https://www.worx.com', 'wroxWindow','height=400,width=121,top=10,left=34,resizable= yes');
// windowWin.opener = null; // 告诉浏览器新创建的标签页不需要与打开它的标签页进行通信，因此可以在独立的进程中运行
// 标签页之间的联系一旦切断， 将没有办法恢复
// b, 安全限制
// 对弹出窗口配置方面增加限制
// c, 弹出窗口屏蔽程序
// (1)如果浏览器内置的屏蔽程序阻止了弹出窗口，那么window.open()可能返回null;
// var wroxWin = window.open('https://www.wrox.com', '_blank');
// if(wroxWin == null){
// alert('the popup was blocked');
// }
// (2) 如果是浏览器扩展或其他程序阻止的弹出窗口，那么window.open()通常会抛出错误
// 因此如下写检查
// var wroxWin = window.open('https://www.wrox.com', '_blank');
// var blocked = false;
// try{
// var wroxWin = window.open('https://www.wrox.com', '_blank');
// if(wroxWin == null){
// blocked = true;
// }
// } catch(ex){
// blocked = true;
// }
// if (blocked){
// alert('the popup was blocked');
// }
// 6，间歇调用 和 超时调用 【重点！！】
// a, 超时调用：在指定的时间过后执行代码
// (1)接收两个参数： 要执行的代码，毫秒表示的时间
// 第一个参数是字符串
// setTimeout('alert("123")', 2000); // 不建议使用
// 第一个参数是函数
// setTimeout(function(){
// alert('hello');
// },2000);
// (2)JavaScript是单线程的解释器，一定时间内只能执行一段代码。
// 为了控制要执行的代码，有一个JavaScript任务队列，这些任务会按照它们添加到队列的顺序执行
// setTimeout()的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中
// 如果队列是空的，那么添加的代码就会立即执行
// 如果队列不是空的，那么他就要等前面的代码执行完了以后再执行
// (3)该方法返回一个“数值ID”，表示超时调用
// 该ID是计划执行代码的唯一标识符，可以通过它来取消超时调用
// 取消在指定时间尚未过去的超时调用计划：将超时调用的ID作为参数传给clearTimeout()
// var color = 'red';
// var timeoutId = setTimeout(function(){
// alert(this.color);
// },1000);
// alert(typeof timeoutId);
// clearTimeout(timeoutId);
// (4) 超时调用的代码都是在全局作用域中执行的，因此函数的this的值在非严格模式下指向window对象，在严格模式下返回undefined;
// 间歇调用：每隔指定的时间就执行一次代码 【最好不要使用间歇调用！！！】
// (1) 每隔指定的时间就执行一次代码，直至间歇调用被取消或者页面被卸载
// setInterval(function(){
// alert('this is !!');
// }, 3000);
// (2) 该方法返回一个“数值ID”，表示间歇调用。ID可以取消尚未执行的间歇调用
// 取消间歇调用的重要性远远高于取消超时调用
// way 1:
// var num = 0,
// max = 10,
// intervalId;
// // 如果执行次数达到max设定的值，则取消后续尚未执行的调用
// function increamentNumber(){
// alert('123');
// num ++;
// if (num == max){
// clearInterval(intervalId); // 取消间歇调用
// alert('Done');
// }
// }
// intervalId = setInterval(increamentNumber, 1000);
// console.log(intervalId);
// way 2: better!!!
// var num = 0,
// max = 10;
// // 如果执行次数未达到max设定的值，则设置另一次超时调用
// function increamentNumber(){
// num ++;
// alert('2323');
// if (num < max){
// setTimeout(increamentNumber, 1000); // 函数自身反复被调用
// }else{
// alert('Done');
// }
// }
// setTimeout(increamentNumber, 1000);
var num = 0,
max = 10;
function increamentNumber(){
if (num < max){
alert('第'+ (num+1) + '次');
setTimeout(increamentNumber, 1000);
} else{
alert('done');
}
num ++;
}
setTimeout(increamentNumber, 1000);
// 【注意】
// 1, 一般认为，使用超时调用来模拟间歇调用的是一种最佳模式
// 2, 在实际开发中，很少使用“间歇调用”,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动
// 7，系统对话框
// alert() confirm() prompt() --> 调用系统对话框向用户显示消息
// 通过这几个方法打开的对话框都是同步和模态的，即显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行
// (1) alert(): 接收一个字符串并将其显示给用户。结果包含指定的文本和一个OK(“确定”)按钮
// 通常使用alert()生成的“警告”对话框向用户显示一些他们无法控制的消息，例如错误消息
// alert('are you sure?');
// // (2) confirm()：跟alert()的区别， 多了个cancel(‘取消’)按钮 “确认”对话框
// confirm('Are you sure?');
// alert('fjaldjfkaf');
// alert('fjaldjfkaf');
// OK --> true
// Cancel --> false
// 【应用】经常应用在用户想要执行删除的时候使用！！
// if(confirm("Are you sure?")){
// alert('i am so glad you are sure!');
// }else{
// alert('i am so sorry to hear you are not sure!');
// }
// (3) prompt(): 这是一个“提示”对话框，用以提示用户输入一下文本
// OK and Cancel按钮 and 文本输入域
// 接收两个参数：文本提示和文本输入域的默认值
// prompt('what is your name?', 'kai');
// OK --> prompt()方法返回文本输入域的值
// cancel或者没有点击或者其他方式关闭了对话框 --> 方法返回null
// var result = prompt('what is your name?','');
// if(result !== null){
// alert('welcome '+ result);
// }
// 浏览器新特性：
// 脚本在执行过程中打开两个或者多个对话框，则从第二个对话框开始，对个对话都会加一个“复选框”，
// 以便用户阻止后续对话框的显示，除非用户刷新页面
// 【好处】如果用户勾选了其中的复选框，并且关闭了对话框（即点击了“OK”），那么除非用户刷新页面，否则，所有的后续的系统对话框（警告，确认和提示框）都会被屏蔽！！
// 浏览器在空闲的时候会重置对话框的计数器，因此，如果两次独立的用户生成两个警告框，那么第二个警告框不会显示复选框；
// 如果是同一次用户操作会生成两个警告框，则第二个框会显示复选框
// (4) find() --> “查找”对话框
// print() --> “打印”对话框
// 特点：异步显示，可以将控制权“立即”交还给脚本
// 显示“打印”对话框
// window.print();
// 显示“查找”对话框
// window.find();
// 【注意】用处有限！！！
// 2，窗口关系和框架(见下)
// top对象: 通过top来引用这些框架!
// top对象始终指向最高（最外）层的框架，也就是浏览器窗口（window对象），使用他可以正确在一个框架中正确访问另一个框架
// parent对象: 始终指向当前框架的直接上层框架
// 如果代码位于topFrame中，则parent指向的是top,因为topFrame的直接上层框架就是最外层框架
// self对象： 始终执行window对象
// self对象存在的目的：与top and parent 对象对应起来，因此self对象不包含其他值
</script>
</head>
<!-- <frameset rows="160,*">
<frame src="https://www.baidu.com" name="topFrame">
<frameset cols="50%, 50%">
<frame src="https://www.taobao.com" name="leftFrame">
<frame src="https://www.tencent.com" name="rightFrame">
</frameset>
</frameset> -->
<!-- 可以通过数值索引（从0开始，从左到右，从上到下）或者框架的名称来访问相应的window对象 -->
<!-- <frameset rows="160,*">
<frame src="https://www.baidu.com" name="topFrame">
<frameset cols="50%, 50%">
<frame src="https://www.taobao.com" name="leftFrame">
<frame src="anotherframeset.htm" name="rightFrame">
</frameset>
</frameset> -->
<body>
</body>
</html>
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
