JavaScript权威指南(第六版) (JavaScript window对象一些概念)

来源:互联网 发布:php post接口 编辑:程序博客网 时间:2024/05/22 16:56
1.闭包 (是指函数变量可以被隐藏于作用域链之内,因此看起来是函数将变量“包裹”了起来)。
JavaScript函数的执行依赖于变量作用域,这个作用域是在函数定义时决定的,而不是函数调用事决定的。未了实现这种词法作用域,JavaScript函数对象的内部状态不仅包含函数的代码逻辑,还必须引用当前的作用域链。函数对象可以通过作用域链相互关联起来,函数题内部的变量都可以保存在函数作用域内,这种特性被称为“闭包”。


从技术的角度讲,所有的JavaScript函数都是闭包:它们都是对象,它们都关联到作用域链。定义大多数函数时的作用域链在调用函数时依赖有效,单这并不影响闭包。
当调用函数时闭包所指向的作用域链和定义函数时候的作用域链不是同一个作用域链时,事情就变得非常微妙。当一个函数嵌套另外一个函数,外部函数将嵌套的函数对象作为返回值返回的时候往往会发生这种事情。
理解闭包首先要了解嵌套函数的词法作用域规则。
    var scope = "global scope";  //全局变量
function checkscope() {
var scope = “local scope”;  //局部变量
function f(){
return scope;   //在作用域中返回这个值
}
return f();
}
checkscope();  // =>“local scope”


checkscope()函数声明了一个局部变量,并定义了一个函数f(),函数f()返回了这个变量的值,最后将函数f()的执行结果返回。




    var scope = "global scope";  //全局变量
function checkscope() {
var scope = “local scope”;  //局部变量
function f(){
return scope;   //在作用域中返回这个值
}
return f();
}
checkscope()();  // =>还是返回“local scope”
在这段代码中,将函数内的一对圆括号移动到了checkscope()之后,checkscope()现在仅仅返回函数内嵌套的一个函数对象,而不是直接返回结果。在定义函数的作用域外面,调用这个嵌套的函数结果如何?
JavaScript函数的执行用到了作用域链,这个作用域链是函数定义的时候创建的。嵌套的函数f()定义在这个作用域里,其中变量scope一定是局部变量,不管在任何时候执行函数f(),都是返回“local scope”,而不是“global scope”。
   简而言之,闭包它们可以捕捉到局部变量(和参数),并一直保存下来,看起来像这些变量绑定到了在其中定义它们的外部函数。(类似C语言里面的指针的用法)
   
2.正则表达式(regular expression)是一个描述字符模式的对象。
  JavaScript的RegExp类表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进行强大的模式匹配和文本检索与替换功能。


3.正则表达式的定义
  JavaScript中的正则表达式用RegExp对象表示,可以使用RegExp()构造函数来创建RegExp对象,RegExp对象更多的是通过一种特殊的直接量语法来创建。
  正则表达式直接量定义为包含在一对斜杠(/)之间的字符,例如:
  var pattern =/s$/;
  运行这段代码创建一个新的RexExp对象,并将它赋值给变量pattern。这个特殊的RegExp对象用来匹配所有以字母“s”结尾的字符串。用构造函数RegExp()也可以定义个与之等价的正则表达式,代码如下:
  var patter = new RegExp("s$");
  
 4.正则表达式的模式规则是由一个字符序列组成的。包括所有字母和数字在内,大多数的字符都是直接量仅描述待匹配的字符的。正则表达式/java/可以匹配任何包含“java”子串的字符串。除此之外,正则表达式中还有其他具有特殊语义的字符,这些字符并不按照字面含义进行匹配。
 比如,正则表达式/s$/包含两个字符,第一个字符“s”按照字面含义匹配,第二个字符$是一个具有特殊语义的元字符,用以匹配字符串的结束。因此这个正则表达式可以匹配任何以“s”结束的字符串。
 
 5.客户端JavaScript Window对象简介: Window对象是所有客户端JavaScript特性和API的主要接入口。它表示Web浏览器的一个窗口或窗体,并且可以用标识符window来引用它。Window对象定义了一些属性,比如,指代Location对象的location属性,Location对象指定当前显示在窗口中的URL,并允许脚本往窗口里载入新的URL:
    //设置location属性,从而跳转到新的Web页面
window.location = "http://www.oreilly.com";
 Window对象还定义了一些方法,比如alert(),可以弹出一个对话框用来显示一些信息。还有setTimeOut,可以注册一个函数,在给定的一段时间之后触发一个回调:
    //等待两秒,弹出hello对话框
    setTimeout(function(){
alert("hello world");
}, 2000);

 注意:上面的代码没有显示地使用window属性。在客户端JavaScript中,Window对象也是全局对象。这意味着Window对象处于作用域链的顶部,它的属性和方法实际上是全局变量和全局函数。Window对象有一个引用自身的属性,叫做window。如果需要引用窗口对象本身,可以用这个属性,但是如果只是想要引用全局窗口对象的属性,通常并不需要用到window。
 
 6.Window对象中其中一个最重要的属性是document,它引用Document对象,后者表示显示在窗口中的文档。Document对象有一些重要的方法,比如getElementById(),可以基于元素id属性的值返回单一的文档元素。(表示HTML标签的一对开始/结束标记,以及他们呢之间的所有内容):
   //查找 id=“timestamp”的元素
   var timestamp = document.getElementById("timestamp");
 
 getElementById()返回的Element对象有其他重要的属性和方法,比如允许脚本获取它的内容,设置属性值等:
   //如果元素为空,往里面插入当前的时间和日期
   if(timestamp.firstChild == null) {
  timestamp.appendChild(document.createTextNode(new Date().toString()));
   }
  
 每个Element对象都有style和className属性,允许脚本指定文档元素的CSS样式,或修改应用到元素上的CSS类名。设置这些CSS相关的属性或改变文档元素的呈现:
    //显示修改目标元素的呈现
    timestamp.style.backgroundColor = "yellow";

//改变类,让样式表指定具体内容
timestamp.className = "highlight";
  
7.Window,Document和Eelement对象上另一重要的属性集合是事件处理程序相关的属性。可以在脚本中为之绑定一个函数,这个函数为在某个事件发生时以异步的方式调用。事件处理程序可以让JavaScript代码修改窗口,文档和组成文档的元素的行为。事件处理程序的属性名是以单词“on”开始的,用法如下:
    //当用户单击timestamp元素时,更新它的内容
    timestamp.onClick = function() { 
this.innerHTML = new Date().toString(); 
}

8.Window对象的onload处理程序是最重要的事件处理程序之一。当显示在窗口中的文档内容稳定并可以操作时会触发它。JavaScript代码通常封装在onload事件的处理程序里。


9.在HTML文档里嵌入客户端JavaScript代码有4种方法:
  * 内联,放置在<script>和</script>标签对之间。
  * 放置在由<script>标签的src属性指定的外部文件中。
  * 放置在HTML事件处理程序中,该事件处理程序由onclick或onmouserover这样的HTML属性值指定。
  * 放在一个URL里,这个URL使用特殊的“javascript:”协议。

10. Javascript代码可以以内联的形式出现在HTML文件里的<script>和</script>标签之间:
<script>
//这里是我们的JavaScript代码
</script>
  在XHTML中,<script>标签中的内容被当做其他内容一样对待。如果JavaScript代码包含了“<”或"&"字符,那么这些字符就被解释成XML标记。因此,如果要使用XHTML,最好把所有的JavaScript代码放入到一个CDATA部分里:
  
<script><![CDATA[
//这里是我们的JavaScript代码
]]>
</script>


例子:演示JavaScript代码以及CSS样式表是如何嵌入HTML文件里。
   //实现一个简单的JavaScript数字时钟程序
   <!DOCTYPE html>
   <html>
<head>
<title>Digital Clock</title>
</head>

<script> //js代码
//定义一个函数用以显示当前时间
function displayTime() {
var elt = document.getElementById("clock");  //通过id=“clock”找到元素
var now = new Date();
elt.innerHTML = now.toLocaleTimeString();    //让elt来显示它
setTimeout(displayTime, 1000);               //在1秒后再次执行
}
window.onload = displayTime; //当onload事件发生时开始显示时间
</script>

<style>
#clock {
font: bold 24pt sans;
backgroundColor: #ddf;
padding: 10px;
border: solid black 2px;
border-radius: 10px;
}
</style>
</head>

<body>
<h1>Digital Clock</h1>
<span id="clock"></span>
</body>
   </html>
 
 11.外部文件中的脚步
 <script>标签支持src属性,这个属性指定包含JavaScript代码的文件的URL。它的用法如下:
     <script srt="../../scripts/util.js"></script>
 


 JavaScript文件的扩展名通常是以.js结尾的。它包含纯粹的JavaScript代码,其中既没有<script>标签,也没有其他HTML标签。
 具有src属性的<script>标签的行为就像指定的JavaScript文件的内容直接出现在标签<script>和</script>之间一样。
 
 12.脚本类型
 JavaScript是Web的原始脚本语言,在默认情况下,假定<script>元素包含或引用JavaScrip代码。如果要使用不标准的脚本语言,就必须用type属性指定脚本的MIME类型:
 
<script type="text/vbscript">
//这里是vbscript代码
</script>
  
  type属性的默认值是“text/javascript”。
  
 13.HTML中的事件处理程序
当脚本所在的HTML文件被载入浏览器时,这个脚本里的JavaScript代码只会执行一次。为了可交互,JavaScript程序必须定义事件处理程序--Web浏览器先注册JavaScript函数,并在之后调用它作为事件的响应(比如用户输入)。
  HTML中定义的事件处理程序的属性可以包含任意条JavaScript语句,相互之间用逗号分隔。这些语句组成一个函数体,然后这个函数成为对应事件处理程序属性的值。但是,通常HTML事件处理程序的属性由类似上面的简单赋值或定义在其他地方的简单函数调用组成。这样可以保持大部分实际的JavaScript代码在脚本里,而不用把JavaScript和HTML混在一起。


14.URL中的JavaScript
  在URL后面跟一个javascript:协议限定符,是另一种嵌入JavaScript代码到客户端的方式。这种特殊的协议类型指定URL内容为任意字符串,这个字符串是会被JavaScript解释器运行的JavaScript代码。它被当做单独的一行代码对待,这意味着语句之间必须用分号隔开,而//注释必须用/* *、注释代替。javascript: URL能识别的“资源”是转换成字符串的执行代码的返回值。如果代码返回undefined,那么这个资源是没有内容的。


 javascript:URL可以用在可以使用常规URL的任意地方:比如<a>标记的href属性,<form>的action属性,甚至window.open()方法的参数.超链接里的JavaScript URL可以是这样:
    
<a href="javascript:new Date().toLocaleTimeString();">
What time is it?
</a>

  部分浏览器会执行URL里的代码,并使用返回的字符串作为待显示新文档的内容.就像单击一个http: URL链接,浏览器会擦除当前文档并显示新文档.
 
 15.事件:
 事件都有名字,比如click, change, load, mouseover, keypress或readystatechange,指示发生的事件的通用类型.事件还有目标,它是一个对象,并且事件就是在它上面发生的.当我们谈论事件的时候,必须同时指定事件类型(名字)和目标:
 比如,一个单击事件发生在HTMLButtonElement对象上,或者一个readystatechange事件发生在XMLHttpRequest对象上.
 如果想要程序响应一个事件,需要写一个函数,叫做"事件处理函数","事件监听器"或者"回调".然后注册这个函数.这样它就会在事件发生的时候调用它.
 注意:事件处理程序的属性的名字是以"on"开始,后面跟着事件的名字.还要注意在上面的任何代码里没有函数调用:只是把函数本身赋值给这些属性.浏览器会在事件发生时执行调用.用事件进行异步编程会经常涉及嵌套函数,也经常要在函数的函数里定义函数.
 
 16.对于大部分浏览器中的大部分事件来说,会把一个对象传递给事件处理程序做为参数,那个对象的属性提供了事件的详细信息.比如,传递给单击事件的对象,会有一个属性说明鼠标的那个按钮被单击.事件处理程序的返回值有时用来指示函数是否充分处理了事件,以及阻止浏览器执行它默认会进行的各种操作.
 
 17.有些事件的目标是文档元素,它们会经常往上传递给文档树,这个过程叫做“冒泡”。例如,如果用户在<button>元素上单击鼠标,单击事件就会在按钮上触发。如果注册在按钮上的函数没有处理(并且冒泡停止)该事件,事件会冒泡到按钮嵌套的容器元素,这样,任何注册在容器元素上的单击事件都会调用。
 18.如果需要为一个事件注册多个事件处理程序函数,或者如果想要写一个可以安全注册事件处理程序的代码模块,就算另一个模块已经为相同的目标上的相同的事件注册了一个处理程序,也需要用到另一种事件处理程序注册技术.大部分可以称事件目标的对象都有一个叫做addEventListener()的方法,允许注册多个监听器:
    
window.addEventListener("load", function() {...}, false );
request.addEventListener("readystatechange", function() {...}, false);

 注意:这个函数的第一参数是事件的名称。

 19.客户端JavaScript线程模型
 JavaScript语言核心并不包含任何线程机制,并且客户端JavaScript传统上也没有定义任何线程机制。HTML5定义了一种作为后台线程的"WebWorker",但是客户端JavaScript还像严格的单线程一样工作。甚至当可能并发执行的时候,客户端JavaScript也不会知晓是否真的有并行逻辑的执行。
 
 20.HTML5定义了一种并发的控制方式,叫做“Web worker”。Web Work是一个用来执行计算密集任务而不冻结用户界面的后台程序。运行在Web worker线程里的代码不能访问文档内容,不能和主线程或其他worker共享状态,只可以和主线程和其他worker通过异步事件进行通信,所以主线程不能检测并发性,并且Web worker不能修改JavaScript程序的基础单线程执行模型。
 
 21.计时器
   setTimeout()和setInterval()可以用来注册在指定的时候之后单次或重复调用的函数。
   Window对象的setTimeout()方法用来实现一个函数在指定的毫秒数之后运行.setTimeout()返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行.
   setInterval()和setTimeout()一样,只不过这个函数会在指定的毫秒数的间隔里重复调用:
      setInterval(updateClock, 60000),
   和setTimeout()一样,setInterval()也返回一个值,这个值可以传递给clearInterval(),用于取消后续函数的调用.
   
 22.Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL,并定义了方法来使窗口载入新的文档.
  Document对象的location属性也引用到Location对象:
     
 window.location == document.location //总是返回true
 
  Document对象也有一个URL属性,是文档首次载入后保存该文档的URL的静态字符串.如果定位到文档中的片段标识符,Location对象会做相应的更新,而doucument.URL属性却不会改变.
  
  23.Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL.Location对的href属性是一个字符串,后者包含URL的完整文本.Location对象的toString()方法返回href属性的值,因此在会隐式调用toString()的情况下,可以使用location代替location.href.
  
  这个对象的其他属性---protocol,host,hostname,port,pathname和search,分别表示URL的各个部分.它们称为"URL分解"属性,同时被Link对象(通过HTML文档中的的<a>和<area>元素创建)支持.
  
  Location对象的hash和search属性比较有趣。如果有的话。hash属性返回URL中的“片段标识符”部分。search属性也类似,它返回的是问号之后的URL,这部分通常是某种类型的查询字符串。一般来说,这部分内容是用来参数化URL并在其中嵌入参数的。虽然这些参数通常用于运行在服务器上的脚本,但在启用JavaScript的页面中当然也可以使用它们。
  例如:提前URL的搜索字符串中的参数
  /**
  * 这个函数用来解析来自URL的查询串中的name=value参数对
  * 它将name=value对存储在一个对象的属性中,并返回该对象
  * 这样来使用它
  *
  * var args = urlArgs(); //从URL中解析参数
  * var q = args.q || ""; //如果参数定义了的话就使用参数;否则使用一个默认值
  * var n = args.n ? parseInt(args.n) : 10;
  **/
  function urlArgs() {
 var args = {};  //定义一个空对象
 var query = location.search.substring(1); //查找到查询串,并去掉‘?’
 var pairs = query.split("&");  //根据“&”符合键查询字符串分割开
 for(var i=0; i<pairs.length; i++) { //对于每个片段
var pos = pairs[i].indexof('=');  //查找“name=value”
if(pos == -1) {  //如果没有找到的话,就跳过
continue;
}
var name = pairs[i].substring(0, pos); //提取name
var value = pairs[i].substring(pos+1);  //提取value
value = decodeURIComponent(value);  //对value进行解码
args[name] = value;   //存储为属性
 }
 
 return args;  //返回解析后的参数
  }


24.载入新的文档
Location对象的assign()方法可以使窗口载入并显示指定的URL中的文档。replace()方法也类似,但它在载入新文档之前会浏览历史中把当前文档删除。如果脚本无条件地载入一个新文档,replace()方法可能是比assgin()方法更好的选择。否则,"后退"按钮会把浏览器带回到原始文档,而相同的脚本则会再次载入新文档。如果检测到用户的浏览器不支持某些特性来显示功能齐全的版本,可以用location.replace()来载入静态的HTML版本。


   //如果浏览器不支持XMLHttpRequest对象
   //则将其重定向到一个不需要Ajax的静态页面
   if(!XMLHttpRequest) {
 location.replace("staticpage.html");
   }


   注意:在这个例子中传入replace()的是一个相对URL。相对URL是相对于当前页面所在的目录来解析的,就像它们用于一个超链接中。
   
   除了assgin()和replace()方法,Location对象还定义了reload()方法,后者可以让浏览器重新载入当前文档。
   使浏览器跳转到新页面的一种更传统的方法是直接把新的URL赋给location属性:

location = “http://www.baodu.com”;


 还可以把相对URL赋给location,它们会相对当前URL进行解析:


location = “page2.html”; //载入下一个页面


纯粹的片段标识符是相对URL的一种类型,它不会让浏览器载入新文档,但只会使它滚动到文档的某个位置。#top标识符是个特殊的例子:如果文档中没有元素的ID是“top”,它会让浏览器跳到文档开始处。

location = “#top”; //跳转到文档的顶部

  Location对象的URL分解属性是可写的,对它们重新赋值会改变URL的位置,并且导致浏览器载入一个新的文档(如果改变的是hash属性,则在当前文档中进行跳转):
     
location.search = "?page=" + (pagenum+1); //载入下一个页面
 
25.浏览历史
Window对象的history属性引用的是该窗口的History对象。History对象是用来把窗口的浏览历史用文档和文档状态列表的形式表示。History对象的length属性表示浏览历史列表中的元素数量,但出于安全的因素,脚本不能访问已保存的URL。


26.Histroy对象的back()和forward()方法与浏览器的“后退”和“前进”按钮一样:它们使浏览器在浏览历史中前后跳转一格。第三个方法---go()接受一个整数参数,可以在历史列表中向前(正参数)或向后(负参数)跳过任意多个页。


   history.go(-2); //后退两个历史记录,相当于单击“后退”按钮两次。
   
 27.Screen对象
 Window对象的screen属性引用的是Screen对象。它提供有关窗口显示的大小和可用的颜色数量的信息。属性width和height指定的是以像素为单位的窗口大小。属性availWidth和availHeight指定的是实际可用的显示大小,它们排除了像桌面任务蓝这样的特性所占用的空间。属性colorDepth指定是是显示的BPP(bits-per-pixel)值,典型的值有16,24和32.
 window.screen属性和它引用的Screen对象都是非标准但广泛实现的。可以用Screen对象来确定Web应用是否运行在一个小屏幕的设备上。
 
 28.Window对象提供了3中方法来向用户显示简单的对话框。alert()想用户显示一条消息并等待用户关闭对话框。confirm()也显示一条消息,要求用户单击“确定”或“取消”按钮,并返回一个布尔值。prompt()同样也显示一条消息,等待用户输入字符串,并返回那个字符串。
 例如:
     
do{
var name = prompt("");
var correct = confirm("You entered '." +name + "'.\n") + "Click Okay to proceed or Cancel to re-enter.");
}while(!corret)
alert("hello, " + name);

 29.showModalDialog()显示一个HTML格式的“模态对话框”,可以给它传入参数,以及从对话框里返回值。
 showModalDialog()在浏览器当前窗口中显示一个模态窗口。第一个参数用以指定提供对话框HTML内容的URL。第二个参数是一个人一直(数组和对象均可),这个值在对话框里的脚本中可以通过window.dialogArguments属性的值访问。第三个参数是一个非标准的列表,包含以分号隔开的name=value对,如果提供了这个参数,可以配置对话框的尺寸或其他属性。用“dialogwidth”和“dialogheight”来设置对话框窗口的大小,用“resizable=yes”来允许用户改变窗口大小。
 
 用这个方法显示的窗口是“模态的”,showModalDialog()这个方法直到窗口关闭之前不会返回。当窗口关闭后,window.returnValue属性的值就是此方法返回的值。对话框的HTML内容往往必须包含用来设置returnValue的“确认”按钮,如果需要则调用window.close().
 注: 模态对话框就是指那种“显示出来就不可以点选为于其下面的对话框”的对话框。
 
 例子:使用showModalDialog()的HTML文件
   
   <form>
<fieldset id="fileds"></fieldset>
<div style="text-align:center">
<button onclick="okay()">Okay</button>
<button onclick="cancel()">Cancel</button>
</div>
<script>
//创建对话框的主体部分,并在filedset中显示出来
var args dialogArguments;
var text "<legend>" + args[0] + "</legend>";
for(var i=1; i<agrs.length; i++) {
text += "<label>"+args[i]+": <input id='f" +i + "'><.label><br>";
}
document.getElementById("fileds").innerHTML = text;

//直接关闭这个对话框,不设置返回值。
function cancel() {
window.close();
}

//读取输入框的值,然后设置一个返回值,之后关闭
function okay() {
window.returnValue = [];   //返回一个数组
for(var i=1; i<args.length; i++) { //设置输入框的元素
window.returnValue[i-1] = document.getElementById("f" + i).value;
}
window.close();
}
</script>
   </form>


30.错误处理
Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它,并把错误消息输出到浏览器的JavaScript控制台上。如果给这个属性赋一个函数。那么只要这个窗口中发生了JavaScript错误,就会调用该函数,即它成了窗口的错误处理程序。
Window对象的onerror事件处理函数的调用通过三个字符串参数,而不是通过通常传递的一个事件对象。window.onerror的第一个参数是描述错误的一条消息。第二个参数是 一个字符串,它存放引发错误的JavaScipt代码所在的文档的URL。第三个参数是文档中发生错误的行数。
如果onerror处理程序返回false,它通知浏览器事件处理程序已经处理了错误,不需要其他操作。


31.作为Window对象属性的文档元素
如果在HTML文档中用id属性来为元素命名,并且如果Window对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性的值,而它们的值指向表示文档元素的HTMLElement对象。
在客户端JavaScript中,Window对象是以全局对象的形式存在于作用域链的最上层,这就意味着HTML文档中使用的id属性会成为可以被脚本访问的全局变量。如果文档包含一个<button id="okay" />元素,可以通过全局变量okay来引用此元素.
但是,如果Window对象已经具有此名字的属性,这就不会发生.比如,id是"history","location"或者“navigator”的元素,就不会以全局变量的形式出现,因为这些ID已经占用了。同样,如果HTML文档包含一个id为“x”的元素,并且还在代码中声明并赋值给全局变量x,那么显式声明的变量会隐藏隐式的元素变量。如果脚本中的变量声明出现在命名元素之前,那这个变量的存在就会阻止元素获取它的window属性。而如果脚本中的变量声明出现在命名元素之后,那么变量的显示赋值会覆盖该属性的隐式值。
 
 例子:通过document.getElementById()方法,用HTML的id属性来查找文档元素。
 
    var ui = ["input", "prompt", "heading"]; //数组中存放要查找的元素id
ui.forEach(function(id) { //用每个id查找对应的元素
ui[id] = document.getElementById(id); //将其存放在一个属性中
});

ui.input,ui.prompt和ui.heading会应用文档元素。脚本可以用全局变量input和heading来代替ui.input和ui.heading。而Window对象有个方法的名字是prompt(),所以脚本中不能用全局变量prompt代替ui.prompt。


32.id元素在文档中必须是唯一的:两个元素不能有相同的id。但是这个对name属性无效。如果上面的元素有多于一个相同的name属性(或者一个元素有name属性,而另一个元素有相同值的id属性),具有该名称的隐式全局变量会引用一个类数组对象,这个类数组对象的元素是所有命名的元素。


33.一个web浏览器窗口可能在桌面上包含多个标签页。每一个标签页都是独立的”浏览上下文“(browsing context),每个上下文都有独立的Window对象,而且相互之间互不干扰。每个标签页中运行的脚本通常并不知道其他标签页的存在,更不用说和其他标签页的Window对象进行交互操作或者操作其文档内容了。如果Web浏览器不支持多标签页,或者把标签页关掉了,可能在某一个时刻桌面上会有很多打开的Web浏览器窗口。而是用标签页,每个窗口桌面中的Window对象都是独立的,也就是说彼此是完全独立的,和其他桌面窗口没有任何联系。


34.打开窗口
使用Window对象的open()方法可以打开一个新的浏览器窗口(或标签页).Window.open()载入指定的URL到新的或已存在的窗口中,并返回代表那个窗口的Window对象.它有4个可选的参数.


open()的第一个参数是要在新窗口中显示的文档的URL.如果这个参数省略了,那么会使用空页面的URL about:blank.
open()的第二个惨是新打开的窗口名字.如果指定了是一个已经存在的窗口的名字(并且脚本允许跳转到那个窗口),会直接使用已存在的窗口.否则,会打开新的窗口,并将这个指定的名字赋值给它.如果省略此参数,会使用指定的名字"_blank"打开一个新的,未命名的窗口.
   需要注意的是,脚本是无法通过简单地猜测窗口的名字来操控这个窗口中的Web应用的,只有设置了"允许导航"的页面才可以这样.当且仅当窗口包含的文档来自相同的源或者是这个脚本打开了那个窗口(或者递归地打开了窗口中打开的窗口),脚本才可以只通过名字来指定存在的窗口.还有,如果其中一个窗口是内嵌在另一个窗口里的窗体,那么在它们的脚本直接就可以相互导航.这种情况下,可以使用保留的名字"_top"(顶级祖先窗口)和"_parent"(直接父级窗口)来获取彼此的浏览上下文.
  
open()的第三个可选参数是一个以逗号分隔的列表,包含大小和各种属性,用以表明新窗口是如何打开的.如果省略这个参数,那么新窗口就会用一个默认的大小,且带有一整组标准的UI组件,即菜单栏,状态栏,工具栏等.在标签式浏览器中,会创建一个新的标签.
另一方面,如果指定这个参数,就可以指定窗口的尺寸,以及它包含的一组属性.(显式指定窗口尺寸更像是创建新窗口,而不是新标签.)  
  例如:要打开允许改变大小的浏览器窗口,并且包含状态栏,工具栏和地址栏:
    
var w = window.open("smallwin.html","smallwin","width=400,height=350,status=yes,resizable=yes");
  
  第三个参数是非标准的,HTML5规范也主张浏览器应该忽略它.
  
 open()的第四个参数只在第二个参数命名的是一个存在的窗口时才有用.它是一个布尔值,声明了由第一个参数指定的URL是应用替换掉窗口浏览历史的当前条目(true),还是应该在窗口浏览历史中创建一个新的条目(false),后者是默认的设置.
 
 open()的返回值是代码命名或新创建的窗口的Window对象.可以在自己的JavaScript代码中使用这个Window对象来引用新创建的窗口,就像使用隐式的Window对象window来引用运行代码的窗口一样:
    
var w = window.open();
w.alert("hello");
w.location = "http://www.baidu.com";

35.关闭窗口
方法close()将关闭一个窗口.如果已经创建了Window对象w,可以使用如下代码将它关闭:


   w.close();


运行在那个窗口中的JavaScript代码则可以使用下面的代码关闭:
  
   window.close()  ;
注意:要显式地使用标识符window,这样可以避免混淆Window对象的close()方法和Document对象的close()方法---如果正在从事件处理程序调用close().即使一个窗口关闭了,代表它的Window对象仍然存在.已关闭的窗口会有一个值为true的close属性,它的document会是null,它的方法通常也不会在再工作.


36.任何窗口或窗体中的JavaScript代码都可以将自己的窗口和窗体引用为window或self.窗体可以用parent属性引用包含它的窗口或窗体的Window对象:


  parent.history.back();
  
如果一个窗口是顶级窗口或标签,而不是窗体,那么其parent属性引用的就是这个窗口本身:
  parent == self; //只有顶级窗口才会返回true
如果一个窗体包含在另一个窗体中,而后在又包含在顶级窗口中,那么该窗体就可以使用parent.parent来引用顶级窗口.top属性是一个通用的快捷方式,无论一个窗体被嵌套了几层,它的top属性引用的都是指向包含它的顶级窗口.如果一个Window对象代表的是一个顶级窗口,那么它的top属性引用的就是窗口本身.对于那些顶级窗口的直接子窗体,top属性就等价于parent属性.


 parent和top属性允许脚本引用它的窗体的祖先,窗体是通过<iframe>元素创建的.可以用获取其他元素的方法来获取一个表示<iframe>的元素对象.  
0 0
原创粉丝点击