[翻译]javascript学习笔记 （三）-window对象
window全局对象的常用属性
我们很少使用窗口位置的属性,但是经常使用其余两个属性.
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类似
queryString('action') 将返回 'browse'
window.unescape,window.escape经常和url参数传递一起使用.当你使用query传递数据时,使用'escaped'来预防查询字符串自身的干扰,如果你的数据含有&,就会造成错误.你需要使用escaped来进行编码 然后使用unescaped解码 例如
window.open接收3个参数:url,窗口名称,窗口属性
第三个参数是一系列字符串,常用的有
setTimeout and setInterval
setTimeout将在指定时间后执行代码
setInterval将周期性的执行代码
如果你没有存储Timeout或Interval的引用,你将没法清除他们.
window.opener 返回父窗口的url
注意:只有新打开的窗口和父窗口在同一台服务器才有用,这是浏览器考虑安全原因而不支持的.
window.document
document.body
document.documentElement
滚动条位置: x: 0, y:3534
窗口尺寸: width: 1272, height: 730
title, referer
document.title 页面标题
document.referer 连接到当前页面的父页面的url 如果是在地址栏直接输入的url则为'undefine'
cookies
通过document.cookie读写cookie.和其他属性不一样,改变document.cookie并没有实际上重写他,而是附加上去.
上面3个函数实现了 读写清除当前页面cookie的功能 我们可以用下面的代码来测试他
| 属性 | 描述 |
| 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 '';
}
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);
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());
}
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>
<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}
}
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);
}
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'));
}
var counter = readCookie('myCounter');
if(counter){
counter = parseInt(counter);
} else {
counter = 0;
}
writeCookie('myCounter', counter+1, 1);
}
function showCounter(){
alert(readCookie('myCounter'));
}
