首页 > 代码库 > Window对象

Window对象

  1. setTimeout()、clearTimeout:用于设置,取消单次执行指定操作的函数;setInterval(),clearInterval():用于设置、取消每隔指定时间执行指定操作的函数。

  2. Window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的url,并定义了方法用来使窗口载入新的文档, window.location===document.location,总是返回true

  3. 解析URLLocation对像的href属性是一个字符串,它包含Url的完整文本。Location对象的toString()方法返回href属性的值,因此在隐式调用toString()的情况下,可以使用location代替location.href。这个对象的protocolhosthostnamepathnamesearch,分别表示URL的各个部分。他们成为“URL分解属性。hash属性返回URL中的“片段标识符”部分。search属性页类似,它返回的是问号之后的url,这部分通常用是某种类型的查询字符串。一般来说,这部分内容是用来参数url并在其中嵌入参数的。虽然这些参数通常用于运行在服务器上的脚本,但在启用javascript的页面中当然也可以使用它们。

#的含义#代表网页中的一个位置。其右面的字符,就是该位置的标识符。比如,

http://www.example.com/index.html#print

    就代表网页index.htmlprint位置。浏览器读取这个URL后,会自动将print位置滚动至可视区域。

    为网页位置指定标识符,有两个方法。一是使用锚点,比如<a name="print"></a>,二是使用id属性,比如<divid="print" >

    http请求不包括#:,#只是用来指导浏览器动作的,对服务器完全无用,索引http请求不包括#比如,访问下面的网址,

    http://www.example.com/index.html#print

    浏览器实际发出的请求是这样的:

        GET /index.htmlHTTP/1.1

        Host:www.example.com

    可以看到,只是请求index.html,根本没有"#print"的部分。

    如果只改变#后面的内容,浏览器不会触发页面重载,但会改变浏览器的访问历史

    每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。

    这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。

    值得注意的是,上述规则对IE 6IE 7不成立,它们不会因为#的改变而增加历史记录。

    window.location.hash这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。

    eg:以http://www.qdweb.com/templete/baidujs.html?id=2#s=1为例

    console.log(location.href);

    console.log(location.toString());

    console.log(location.protocol);

    console.log(location.host);

    console.log(location.hostname);

    console.log(location.pathname);

    console.log(location.search);

    console.log(location.hash);

    输出结果为:

http://www.qdweb.com/templete/baidujs.html?id=2#s=1qwzn1.js:113

http://www.qdweb.com/templete/baidujs.html?id=2#s=1qwzn1.js:114

http: qwzn1.js:115

www.qdweb.com qwzn1.js:116

www.qdweb.com qwzn1.js:117

/templete/baidujs.html qwzn1.js:118

?id=2 qwzn1.js:119

#s=1

   url路径进行解析的函数

/**

 * 将路径解析为键值对

 * @return {[对象]} [返回解析后的键值对对象]

 */

         function urlArgs(){

         var args={};

         varquery=location.search.substring(1);

         varpairs=query.split("&");

         for (var i = 0; i <pairs.length; i++) {

                   varpos=pairs[i].indexOf(‘=‘);

                   if(pos==-1){

                            continue;

                   }

                   varname=pairs[i].substring(0,pos);

                   varvalue=http://www.mamicode.com/pairs[i].substring(pos+1);

                   value=http://www.mamicode.com/decodeURIComponent(value);//value值进行解析

                   args[name]=value;

         };

         return args;

}

Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。replace()方法也类似,但它在载入新文档之前会从浏览历史中把当前文档删除。如果脚本无条件地载入一个新文档,replace()方法可能是比assign()方法更好的选择。否则,“后退”按钮会把浏览器带回到原始文档,而相同的脚本则会再次载入新文档。

此外还有reload()方法,使浏览器重新载入当前文档。

4.浏览历史:History对象用来把窗口的浏览历史和文档状态列表的形式表示。History对象的length属性表示浏览历史列表中的元素数量,但出于安全因素,脚本不能访问已保存的URL

    History对象的back()和forward()方法与浏览器的“后退”和“前进”按钮一样:他们使浏览器在浏览历史中前后跳转一格。

    go()方法接受一个整数参数,可以再历史列表中向前(正整数——或向后(负整数)跳过任意多个页。

    如果窗口包含多个子窗口(比如<iframe>元素),子窗口的浏览历史会按时间顺序穿插在主窗口的历史中。这意味着在主窗口调用history.back()可能会导致其中一个子窗口往回跳转到前一个显示的文档,但主窗口保留当前状态不变。

5.Navigator对象:包含浏览器厂商和版本信息,主要用才对浏览器的嗅探上,主要有:

    appNameWeb浏览器的全称。在IE中是“Microsoft Internet Explorer”。在Firefox中,该属性是“Netscape”。为了兼容现存的浏览器嗅探代码,其他浏览器通常也取值为“Netscape

    appVerson:此属性通常以数字开始,并跟着包含浏览器厂商和版本信息的详细字符串。字符串前面的数字通常是4.05.0,表示它是第4或第5代兼容的浏览器。appVerson没有标准格式,所以,没办法直接用它来判断浏览器的类型

    userAgent:浏览器在它的USER-AGENT HTTP头部中发送的字符串。这个属性通常包含appVersion中的所有信息,并且常常也可能包含其他的细节。和appVerson一样,它也没有标准格式。由于这个属性包含绝大部分信息,因此浏览器嗅探代码通常用它来嗅探。

    /**

     * 为客户端嗅探定义browser.namebrowser.version,这里使用jq1.4.1中的代码

     * "webkit"SafariChrome;版本号是Webkit的版本号

     * "opera"Opera;版本号就是其软件的版本号

     * "mozilla":Firefox或者其他基于gecko内核的浏览器;版本号是Gecko的版本

     * "mise"IE;版本号就是软件的版本

     * @return {[type]} [返回一个包含名称和版本号的对象]

     */

    varbrowser=(function(){

     var s=navigator.userAgent.toLowerCase();

     var match=/(webkit)[\/]([\w.]+)/.exec(s)||

     /(opera)(?:.*verson)?[\/]([\w]+)/.exec(s)||

     /(mise)([\w.]+)/.exec(s)||

     !/compatible/.test(s)&&/(mozilla)(?:.*?rv:([\w.]+))?/.exec(s)||

     [];

     return{

               name:match[1]||"",verson:match[2]||"0"

     };

    })();

    platform:在其上运行浏览器的操作系统(并且可能是硬件)的字符串。

    onLine:如果存在的话,表示浏览器当前是否连接到网络。

    geoLocation:定义用于确定用户地理位置信息的接口

    javaEnabled():当浏览器可以运行java小程序时返回true

    cookieEnable():如果浏览器可以保存永久的cookie时,返回true。当cookie配置为“视情况而定”时,可能返回不正确的值。

6.Screen提供有关窗口显示的大小和可用的颜色数量的信息。属性widthheight指定的是以像素为单位的窗口大小。属性availWidthavailHeight指定的是实际的可用的显示大小,它们排除了像桌面任务栏的特性所占用的空间。可以用Screen对象来确定Web应用是否运行在一个小屏幕的设备上,如上网本。

7.对话框:alert()向用户显示一条消息并等待用户关闭的对话框,confirm()要求用户单击“确定”或“取消”按钮,并返回一个布尔值。prompt()同样显示一条消息等待用户输入字符串并返回那个字符串。

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

    window.onerror=function(msg,url,line){

     console.log("消息:"+msg);

     console.log("路径:"+url);

     console.log("所在行:"+line);

    }

9.如果在html文档中用id属性为元素命名,并且如果Widow对象没有此名字的属性,Window对象会赋予一个属性,它的名字是id属性,而他们的值指向表示文档元素的HTMLElement对象。比如<button id=”okay” />元素,可以通过全局变量okay来引用此函数。但如果Window对象有此名字的属性,这就不会发生。

    jq根据id获取元素的函数:

    var $=function(id){

             return document.getElementById(id);

    }

10.open():打开一个新的浏览器窗口(或标签页,这通常和浏览器的配置选项有关)。Window.open()载入指定的URL到新的或已存在的窗口中,并返回代表那个窗口的Window对象。它有4个可选的参数。第一个,要在新窗口中显示的文档的URL,如果这个参数省略了(也可以是空字符串)。那么会使用空白页的URL aboutbalnk第二个,新打开的窗口的名字。如果指定的是一个已经存在的窗口的名字(并且脚本允许跳转到那么窗口),会直接使用已存在的窗口。否则,会打开新的窗口,并将这个指定的名字赋值给它。如果省略这个参数,会使用指定的名字“_blank”打开一个新的、未命名的窗口。

    需要注意的是,脚本时无法通过简单地猜测窗口名字来操控这个窗口中的Web应用的,只有设置了“允许导航”的也米昂才可以这样。宽泛地讲,当且仅当窗口包含的文档来自相同的源或者是这个脚本打开了那个窗口(或者递归地打开了窗口中的窗口),脚本才可以只通过名字来指定存在的窗口。还有,如果其中一个窗口是内嵌在另一个窗口里的窗体,那么他们的脚本之间就可以相互导航。这种情况下,可以使用保留的名字”_top”(顶级祖先窗口)和“_parent”(直接父级窗口)来获取彼此的浏览上下文。

    窗口的名字允许open()方法引用已存在的窗口,并且同时可以作为<a><form>元素上的HTML target属性的值,用来表示引用的文档(或表单提交结果)应该显示在命名的窗口中。这个target属性的值可以设置为”_blank””_top”,从而使引用的文档显示在新的空白的窗口,父窗口/窗体或顶层窗口中。

    Window对象如果有name属性,就用它保存名字,该属性是可写的,并且脚本可以随意设置它。如果传递给Window.open()一个除”_blank”之外的名字,通过该调用创建的窗口将以改名字作为name属性的初始值。如果<iframe>元素有name属性,表示该iframewindow对象会用它作为name属性的初始值。

    第三个参数是一个用逗号隔开的列表,包括大小和各种属性,用以表明新窗口是如何打开的。如果省略这个参数,那么新窗口就会用一个默认的大小,而且带有一整组标准的UI组件,即菜单栏,状态栏,工具栏。在标签式浏览器中,会创建一个新的标签。另一方面如果指定了这个参数,就可以指定窗口的尺寸,以及它包含的一组属性。(显式指定窗口尺寸更像是创建新窗口,而不是新标签。)例如,要打开允许改变大小的浏览器窗口,并且包含状态栏、工具栏和地址栏,就可以这样写:

    var w=window.open(“smallwin.html”,”smallwin”,”width=400,height=350,status=yes,resizable=yes”);

    第四个参数只在第二个参数命名的是一个存在的窗口时才有用。他是一个布尔值,声明了由第一个参数指定的URL是应用替换掉窗口浏览历史的当前条目(true),还是应该在窗口浏览历史中创建一个新的历史条目(fales),后者是默认的设置。

    在由window.open()方法创建的窗口中,opener属性引用的是打开它的脚本的Window对象。在其他窗口中,openernull

11.close():关闭一个窗体,需要显式地调用window.close(),避免和Document对象的close()方法(如果正在从事事件处理程序调用close())混淆。

12.Window对象是客户端JavaScript的全局变量,但是从技术上来看,并不是这样的。Web浏览器每次向窗口或窗体中载入新的内容,他都会开始一个新的JavaScript执行上下文,包含一个新创建的全局对象。但是当多个窗口或窗体在使用时,有一个重要的概念,尽管窗体或窗口载入新的文档,但是引用窗体或窗口的Window对象还仍然是一个有效的引用。

    所有客户端JavaScript有两个重要的对象。客户端全局对象处于作用域链的顶级,并且是全局变量和函数所定义的地方。事实上,全局对象会在窗口或窗体载入新内容时被替换掉。我们称为“Window对象”的对象实际上不是全局对象,而是全局对象的一个代理。每当查询或设置Window对象的属性时,就会在窗口或窗体的全局对象上查询或设置相同的属性。真正的全局对象是Global


本文出自 “虎哥的博客” 博客,请务必保留此出处http://7613577.blog.51cto.com/7603577/1570773

Window对象