现在的位置: 首页 > 综合 > 正文

javascript学习笔记 (三)-window对象

2013年08月22日 ⁄ 综合 ⁄ 共 5198字 ⁄ 字号 评论关闭
 

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==0return;
    
// 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+'=')==0return 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+11);
}

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

抱歉!评论已关闭.