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

最新推荐文章于 2023-04-03 10:16:13 发布

最新推荐文章于 2023-04-03 10:16:13 发布 · 81 阅读

文章标签：

#JavaScript #ASP #IE #浏览器 #HTML #ViewUI

本文介绍了JavaScript中window全局对象的常用属性与方法，包括页面重定向、获取URL参数、打开新窗口、设置定时器等功能，并提供了document对象的相关属性介绍。

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类似

functionqueryString(val){
varq=unescape(location.search.substr(1)).split('&');

for(vari=0;i<q.length;i++){
vart=q[i].split('=');
if(t[0].toLowerCase()==val.toLowerCase())returnt[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,窗口名称,窗口属性

varnewWindow=window.open('','TestWindow','width=200,height=200');
newWindow.document.write('Thiswindowwillclosein2seconds');
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的引用,你将没法清除他们.

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

varintervals=[];
functioncreateInterval(text,time){
//storetheintervalinintervalsarray
intervals.push(setInterval("alert('"+text+"');",time));
}

functiontut5(){
if(intervals.length==0)return;
//clearthelastintervalinintervalsarray
clearInterval(intervals.pop());
}

window.opener 返回父窗口的url

<HTML>
<HEAD>
<scripttype="text/javascript">

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

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


<HTML>
<HEAD>
<scripttype="text/javascript">

document.write('TheURLoftheparentwindowis:'+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

functiongetScrollPos(){
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};
}

functiongetWindowDims(){
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并没有实际上重写他,而是附加上去.

functionwriteCookie(name,value,days){
if(days){
(time=newDate()).setTime(newDate().getTime()+days*24*60*60*1000);
varexp=';expires='+time.toGMTString();
}else{
varexp='';
}
document.cookie=name+"="+value+exp+";path=/";
}

functionreadCookie(name){
varcookies=document.cookie.split(';');
for(vari=0;i<cookies.length;i++){
varcookie=cookies[i].replace(/^\s+/,'');
if(cookie.indexOf(name+'=')==0)returncookie.substring(name.length+1);
}
returnnull;
}

functioneraseCookie(name){
writeCookie(name,"",-1);
}

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

functionaddToCounter(){
varcounter=readCookie('myCounter');
if(counter){
counter=parseInt(counter);
}else{
counter=0;
}

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

functionshowCounter(){
alert(readCookie('myCounter'));
}