javascript学习笔记 （三）-window对象

 

window全局对象的常用属性

属性	描述
window.location	returns the current URL for the window.
window.opener	如果窗口是由其他窗口打开(使用window.open), 这个属性返回父窗口的值
MSIE: window.screenTop Other: window.screenY	返回窗口上方的位置.注意 IE里的这个值和其他浏览器的返回值完全不同. MSIE返回的是相对于当前网页区域的值. 其他浏览器返回的是相对于浏览器的值.
MSIE: window.screenLeft Other: window.screenX	返回窗口左边的值.和screenTop具有相同的问题.

我们很少使用窗口位置的属性,但是经常使用其余两个属性.

window.location
提供两个功能:页面重定向和获取当前文档的url地址
也许你不关心页面的地址,但是你或许想知道页面传递的参数 比如：http://www.somesite.com/page.asp?action=browse&id=5#someAnchor 这个url可以被分为三个部分
URL:      http://www.somesite.com/page.asp
Query String:     action=browse&id=5
Anchor:     someAnchor
由于window.location包含了所有的内容,我们可以写一个函数来获取传递的参数 这和asp中的request.querystring 和php中的$_GET类似

function  queryString(val){
     var  q   =  unescape(location.search.substr( 1 )).split(' & ');

     for ( var  i = 0 ; i < q.length; i ++ ){
         var  t = q[i].split(' = ');
         if (t[ 0 ].toLowerCase() == val.toLowerCase())  return  t[ 1 ];
    }
     return  '';
} 

queryString('action') 将返回 'browse'
window.unescape,window.escape经常和url参数传递一起使用.当你使用query传递数据时,使用'escaped'来预防查询字符串自身的干扰,如果你的数据含有&,就会造成错误.你需要使用escaped来进行编码 然后使用unescaped解码 例如

window.location = ' / page.asp ? name = ' + escape(SomeInputBox.value);

window.open接收3个参数:url,窗口名称,窗口属性

var  newWindow = window.open('', 'TestWindow', 'width = 200 ,height = 200 ');
newWindow.document.write('This window will close  in   2  seconds');
setTimeout( function (){ newWindow.close(); },  2000 );

第三个参数是一系列字符串,常用的有

属性	描述
width, height	sets the dimensions of the window
left, top	sets the position of the window on the screen
location, menubar, toolbar, status, titlebar, scrollbars	These options display/hide their respective "bars" from the window. Set to "yes" to show the "bar".
resizable	If set to "yes" the window can be resized

setTimeout and setInterval
setTimeout将在指定时间后执行代码
setInterval将周期性的执行代码

如果你没有存储Timeout或Interval的引用,你将没法清除他们.

function  createTimeout(text, time){
    setTimeout( " alert(' " + text + " '); " , time);
}

var  intervals  =  [];
function  createInterval(text, time){
     //  store the interval in intervals array
    intervals.push(setInterval( " alert(' " + text + " '); " , time));
}

function  tut5(){
     if (intervals.length == 0 )  return ;
     //  clear the last interval in intervals array
    clearInterval(intervals.pop());
}

window.opener 返回父窗口的url

<!-- page1.html -->
< HTML >
< HEAD >
< script  type ="text/javascript" >

window.open('page2.html', 'TestWindow', 'width = 500 ,height = 200 ,resizable = yes');

</ script >
</ HEAD >
</ HTML >

<!-- page2.html -->
< HTML >
< HEAD >
< script  type ="text/javascript" >

document.write('The URL of the parent window is: ' + window.opener.location);

</ script >
</ HEAD >
</ HTML >

注意:只有新打开的窗口和父窗口在同一台服务器才有用,这是浏览器考虑安全原因而不支持的.

window.document

属性	描述
document.forms	An array containing all the forms on the current page
document.images	An array containing all the images on the current page
document.links	An array containing all the links on the current page
document.anchors	An array containing all the anchors on the current page
document.applets	An array containing all the applets on the current page
document.styleSheets	An array containing all the stylesheets on the current page
window.frames	An array containing all the frames on the current page

属性	描述
document.getElementById	Returns one element based on its ID
document.getElementsByName	Returns an array of elements specified by their Name. Unlike an ID, many elements can have the same name on a page.
document.getElementsByTagName	Returns an array of elements specified by their Tag Name. The Tag Name is simply the name of the HTML tag, ie 'DIV', 'IMG', 'TABLE', 'A', etc.

document.body
document.documentElement

function  getScrollPos(){
     if  (window.pageYOffset){
         return  {y:window.pageYOffset, x:window.pageXOffset};
    }
     if (document.documentElement  &&  document.documentElement.scrollTop){
         return  {y:document.documentElement.scrollTop, x:document.documentElement.scrollLeft};
    }
     if (document.body){
         return  {y:document.body.scrollTop, x:document.body.scrollLeft};
    }
     return  {x: 0 , y: 0 };
}

function  getWindowDims(){
     if  (window.innerWidth){
         return  {w:window.innerWidth, h:window.innerHeight};
    }
     if  (document.documentElement  &&  document.documentElement.clientWidth){
         return  {w:document.documentElement.clientWidth, h:document.documentElement.cliendHeight};
    }
     if  (document.body){
         return  {w:document.body.clientWidth, h:document.body.clientHeight};
    }
     return  {w: 0 , h: 0 }
}

滚动条位置:      x: 0, y:3534
窗口尺寸:         width: 1272, height: 730

title, referer
document.title 页面标题
document.referer 连接到当前页面的父页面的url 如果是在地址栏直接输入的url则为'undefine'

cookies
通过document.cookie读写cookie.和其他属性不一样,改变document.cookie并没有实际上重写他,而是附加上去.

function  writeCookie(name, value, days){
     if (days){
        (time  =   new  Date()).setTime( new  Date().getTime() + days * 24 * 60 * 60 * 1000 );
         var  exp  =  '; expires = ' + time.toGMTString();
    } else {
         var  exp = '';
    }
    document.cookie = name + " = " + value + exp + " ; path=/ " ;
}

function  readCookie(name){
     var  cookies  =  document.cookie.split(';');
     for ( var  i = 0 ; i < cookies.length; i ++ ){
         var  cookie = cookies[i].replace( /^ /s +/ , '');
         if  (cookie.indexOf(name + ' = ') == 0 )  return  cookie.substring(name.length + 1 );
    }
     return   null ;
}

function  eraseCookie(name){
    writeCookie(name,  "" ,  - 1 );
}

上面3个函数实现了 读写清除当前页面cookie的功能 我们可以用下面的代码来测试他

function  addToCounter(){
     var  counter  =  readCookie('myCounter');
     if (counter){
        counter  =  parseInt(counter);
    }  else  {
        counter  =   0 ;
    }

    writeCookie('myCounter', counter + 1 ,  1 );
}

function  showCounter(){
    alert(readCookie('myCounter'));
}