BOM的学习笔记 一一 window 对象

BOM 的核心对象是 window,在浏览器中，

window 对象的双重角色:

1. 通过 JS 访问浏览器窗口的一个接口;
2. ES 规定的 Global 对象;

全局作用域

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法

区别：

1. 全局变量不能通过 delete 操作符删除，而在 window 对象上定义的属性可以
2. 尝试访问未声明的全局变量会抛出错误，但通过查询 window 对象，可以知道某个可能未声明的变量是否存在

窗口关系及框架

每个框架都有一套自己的，一一对应的构造函数

若页面中包含框架，则每个框架都拥有自己的 window 对象（“一对一”）保存在 frames 集合中

与框架有关的几个对象：

1. top 对象始终指向最高（最外）层的框架，即浏览器窗口，确保在一个框架中正确地访问另一个框架
2. parent 对象始终指向当前框架的直接上层框架
3. self 对象始终指向 window

窗口位置

跨浏览器获取窗口左边和上边的位置

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
			
var rightPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

moveTo( ) 和 moveBy( ) 方法可精确移动，但这两个方法不适用于框架，只能对最外层的 window 对象使用

• moveTo( )方法的参数：目标位置的 x, y 坐标值；
• moveBy( )方法的参数：水平，垂直方向上移动的像素数

窗口大小

4个属性：innerWidth、innerHeight、outerWidth、outerHeight

调整浏览器大小：

• resizeTo( )方法：接收浏览器窗口的新宽度、新高度；
• resizeBy( )方法：接收新窗口与原窗口的宽度和高度之差；

这两种方法同样不适用于框架，而只能对最外层的 window 对象使用

导航和打开窗口

window.open( )方法
传入的参数：要加载的 URL 、窗口目标、一个特性字符串、一个表示新页面是否是否取代浏览器历史纪录中当前加载页面的布尔值

弹出窗口

• fullscreen:                 表示浏览器窗口是否最大化
• height：                     窗口高度；
• width：                       窗口宽度；
• top：                           窗口距离屏幕上方的象素值；
• left：                           窗口距离屏幕左侧的象素值；
• toolbar：                     是否显示工具栏，yes为显示；
• menubar，scrollbars: 表示菜单栏和滚动栏；
• resizable:                    是否允许改变窗口大小，yes为允许；
• location：                    是否显示地址栏，yes为允许；
• status：                       是否显示状态栏内的信息（通常是文件已经打开）

window.open( ) 方法会返回一个指向新窗口的引用，弹出窗口可以调用 top.close( )在不经用户允许的情况下关闭自己。

新建的 window 对象有一个 opener 属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口的最外层 window 对象有定义, opener = null，表示在单独的进程中进行新标签页

安全限制

弹出窗口屏蔽程序

检测 window.open( )打开的弹窗是否被屏蔽：

<script type="text/javascript">
			
			var blocked = false;
			
			try {
				
				var wroxWin = window.open("http://www.wrox.com", "_blank");
				
				if(wroxWin == null){
					
					blocked = true;
				}
			}
			catch (ex){
				
				blocked = true;
			}
			if (blocked){
				
				alert("The popup was blocked!");
			}
			
		</script>

间歇调用和超时调用

即定时器：
https://blog.csdn.net/qiao_xi/article/details/97484700

系统对话框

• alert( )方法

<script type="text/javascript">
			alert("Hello World!");
		</script>

有确认按钮

• confirm( )方法

<script type="text/javascript">
			confirm("Are you sure?");
			
			if(confirm("Are you sure?")){
				
				alert("I'm so glad you're sure! ");
			}
			else{
				
				alert("I'm sorry to hear you're not sure. ");
			}
		</script>

增加取消按钮

• prompt( )方法

<script type="text/javascript">
			
			var result = prompt("What's your name? ","");
			
			if(result != null){
				
				alert("Welcome, " + result);
			}
		</script>

增加文本框

• 查找和打印
  这两个对话框都是异步显示，能够将控制权立即交还给脚本

//显示"打印"对话框
window.print( );
//显示"查找"对话框
window.find( );