《JavaScript高级程序设计》之BOM章节笔记

最新推荐文章于 2024-03-09 13:07:10 发布

转载最新推荐文章于 2024-03-09 13:07:10 发布 · 88 阅读

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3070312/blog/2997644

BOM对象的核心是window，是一个浏览器实例，window对象是通过JavaScript访问浏览器的接口，又是ECMAScript规定的Global对象。所以网页中定义的任何一个对象、变量和函数都以window作为其Global对象，因此有权访问　　parseInt()等方法。在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>BOM</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<script type="text/javascript">
		var age=28;
		function sayage(){
		   console.log(this.age);
		}
		console.log(window.age);
		sayage();
		window.sayage();
	</script>
</body>
</html>

全局变量不能通过delete操作符删除，但是在window对象上定义的属性可以。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>BOM</title>
	<link rel="stylesheet" href="">
</head>
<body>
	<script type="text/javascript">
		var age=28;
		window.color="red";
		delete window.color;
		console.log(age);
	    console.log(window.color);
	</script>
</body>
</html>

窗口关系及框架

如果页面中有框架，则每个框架都有自己的window对象，并且保存在frames集合中，可以通过数值索引（从0开始，从左到右，从上到下）或者框架名来访问相应的框架。每个框架都包含一个name属性，其中包含了框架的名称。我们可以通过window.frames[数值索引]或者window.frames[框架名称(需引号)]和top.frames[数值索引]或者top.frames[框架名称(需引号)]以及frames[数值索引]或者frames[框架名称(需引号)]来引用框架。不过建议使用top.frames[数值索引]或者top.frames[框架名称(需引号)来引用框架。

与top相对应的另一个window对象是parent，也就是“父对象”。顾名思义，父对象始终指向当前框架的直接上层框架。在某些情况下parent对象有可能等于top对象，当页面中没有框架时，top对象一定等于parent对象。

与框架有关的最后一个属性是self，这个对象始终指向window；self和window可以互换使用。引入self对象的目的只是为了与top和parent对象对应起来，因此不包含其他值。

所有这些对象都是window对象的属性，可以通过window.parent、window.top等形式来访问。所以可以通过将不同层次的window对象连缀起来，例如window.parent.parent.feames[0]。

窗口位置

获取和修改window对象位置的属性和方法有很多。IE、Chrome、Opera、Safari都提供了screenLeft和screenTop属性，用于分别表示屏幕左边和屏幕上边，而Firefox则是screenY、screenX。Safari和Chrome也支持这两个属性。

使用下面方法可跨浏览器，获得窗口的左右上下位置

<!DOCTYPE html>
<html>
<head>
    <title>Window Position Example</title>
</head>
<body>
    <script type="text/javascript">
        var leftPos=(typeof window.screenLeft==="number")?
             window.screenLeft:window.screenX;
     var  topPos=(typeof screenTop==="number")?
           window.screenTop:window.screenY;
    </script>
</body>
</html>

使用moveTo()和moveBy()能将窗口精确地移到一个新位置。这两个方法都接受两个参数；moveTo接受的参数表示浏览器新位置的坐标；moveBy()接受的是在水平和垂直方向上移动的像素。这两个方法可能会被浏览器禁用。在Opera和IE7+中就是被默认禁用的，同事这两个方法不适用于框架，只能对最外城的window对象使用。

浏览器窗口大小

IE9+、Safir、Chorme、Firefox和Opera提供了四个用于确定浏览器窗口大小的属性：innerWidth、innerHeight、outerWidth、outerHeight。在IE9+、Safir、Firefox中。outerWidth和outerHeight返回整个浏览器本身的大小，在Opera中，返回的是页面视图的大小。而innerWidth和innerHeight返回的是页面视图区（减去边框）的大小。在chrome中innerHeight、innerWidth和outerHeight、outerWidth返回的值都是一样的，即视口的大小而不是浏览器窗口的大小。

IE8及之前的版本没有上面四个获取浏览器窗口尺寸的属性，不过可以通过DOM提供页面的可视区域。

在IE、Firefox、Safari、Opear和Chrome中，document.documentElement.clientWidth和document.documentElementHeight中保存了页面的信息。在IE6中，这些属性只有在标准模式下才有效。混合模式下使用document.body.clientWidth和document.body.clientHeight.Chrome两种都可以获取窗口的大小。

跨浏览器获取浏览器窗口大小：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<script type="text/javascript">
		var pageWidth=window.innerWidth,
		    pageHeight=window.innnerHeight;
		    if(typeof pageWidth !="number"){
		    	//判断是否是标准模式
		    	if(document.compatMode=="CSS1Compat"){
		    		//如果是
		    		pageWidth=document.documentElement.clientWidth;
		    		pageHeight=document.documentElement.clientHeight;
		    	}else{
		    		// 如果不是
		    		pageWidth=document.body.clientWidth;
		    		pageHeight=document.body.clientHeight;
		    	}
		    }

	</script>
</body>
</html>

调整浏览器窗口大小

使用resizeTo()和resizeBy()方法可以调整浏览器大小，两个方法都接受两个参数，resizeTo()接受浏览器窗口新的宽度和高度，resizeBy()接受新旧窗口之间的差值。在Opera和IE7+的版本中是被烬用的。同样这个两个属性不使用于框架，只对最外层的window对象使用。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<script type="text/javascript">
	// 新浏览器窗口的尺寸
	window.resizeTo(400,500);
   // 新旧窗口的宽高之差
   window.resizeBy(40,50);
	</script>
</body>
</html>

导航和打开新的窗口

window.open()这个方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法接收4个参数：要加载的URL，窗口目标，一个特性字符串一个一个表示页面是否要在新的窗口中打开的布尔值。

语法：window.open(url,name,specs,replace)

url表示目标窗口的链接,如果没有，打开一个空白页；
name表示目标窗口打开的方式，即target的属性：_self（替换当前页面），_blank（在新窗口中打开），_top（ URL替换任何可加载的框架集），_parent（在父框架中打开），name（窗口名称）；
spaecs表示在新窗口中都显示那些属性：

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。

window.close()关闭窗口，该方法仅适用于window.open()打开的窗口

新创建的window对象有一个opener属性，这个属性保存打开他的的原始窗口的的对象，这个对象只在弹出层的最外层window对象（top）中定义，且指向调用window.open()的窗口的框架。

循环条件，和延时调用

循环条用用setInterval()，接收两个参数，第一个参数表示要调用的字符串或者函数，第二个参数接受一个毫秒为单位的时间参数，表示相隔这个时间段调用一次参数一，循环调用。

延时调用setTimeout()，接收两个参数，第一个参数表示要调用的字符串或者函数，第二个参数接受一个毫秒为单位的时间参数，表示表示相隔这个时间段调用参数一，只调用一次，

系统对话

alert()、confirm()和prompt()用于调用系统对话框向用户显示信息。

confirm()用于让用户决定是否执行给定操作

confirm()会让用户获得含有两个选择的提示框，如果用户选择“是”，这继续执行给定的操作，如果用户选择“否”，则停止操作。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	<a href="my_register.php?name=dding">dding</a>
	<a href="my_register.php?name=wwang">wwang</a>
	<a href="my_register.php?name=zhang">zhang</a>
	<script type="text/javascript">
		if(confirm("你是Bugme吗")){
			alert("见到你很高兴");
		}else{
			alert("对不起打扰了！");
		}
	</script>
</body>
</html>

　　prompt()是一个“提示框”，用于提示输入一些信息。如果输入的信息。提示框除了显示“是”和“否”之外，还会显示一个文本输入域，用于供用户输入一些文本。这个方法接收两个参数：要显示给用户的文本提示和文本输入域的默认值（可以为空）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
	
	<script type="text/javascript">
		var result=prompt("你的名字是？","");
		if(result ==="Bugme"){
			alert("你好"+result);
		}
	</script>
</body>
</html>

　　location对象

location对象即使window对象，同时也是document对象，因此window.location和document.location调用的是同一个对象。

转载于:https://my.oschina.net/u/3070312/blog/2997644