javascript 脚本化的浏览器窗口

计时器

  计时器相关的四个函数.   setTimeout()  clearTimeout()  setInterval()   clearInterval()

  setTimeout(),参数为毫秒数,作用是在指定毫秒数之后运行.clearTimeout()表示清除计时器

  setInterval(),参数为毫秒数,作用是以间隔指定毫秒数,重复执行.clearInterval()清除间隔. 

浏览器的Location和History

解析URL

   窗口的location引用的是Location对象,它代表该窗口中当前显示的文档URL.Location对象的href是一个字符串,包含URL的完整文本.这个对象的其他属性:protocol,host,pathname和search分别声明了URL的各个部分.search代表的是URL中"?"之后的部分,是查询字符串.

载入新的文档

Window的Location和document的location是不一样的.前面的Location改变可以重新载入文档,后面的属性值是只读的.document的location包含了已经载入的文档的URL的地址,是个数组形式的.Location中的地址是当前窗口的地址,只是一个字符串.

History对象

Window对象的history引用的是该窗口的History对象.History最初是用来把窗口的浏览历史构造成最近访问过的URL数组.它支持三种方法,back(),forward(),go().

获取窗口.屏幕和浏览器信息

窗口的几何大小

 大多数浏览器支持Window对象上的一组简单属性,它们可以获取有关窗口大小的位置和信息.   window.outerWidth;window.outerHeight;window.screenX;window.screenY;window.pageXoffset;window.pageYoffset.

这些属性是只读的.

Screen对象

Window对象的screen引用的是Screen对象.这个Screen对象提供有关用户显示器的大小和可用颜色的数量信息.属性width和height指定的是以像素为单位的显示器大小.availWidth和availHeight是实际可用的显示大小,排除了任务栏的空间.      

Navigator对象

Window对象的navigator属性引用的是包含浏览器总体信息的Navigator对象.下面是浏览器功能测试方法.

if(window.addEventListener){    //Mozilla}

else if (window.attachEvent){   //IE} else{   //others}

Navigator用来处理特定版本中的特定BUG.它有五个属性:

appName:浏览器的简单名称.

appVersion:浏览器的版本号和其他版本信息.

userAgent:浏览器在它的USER-AGENT HTTP头部中发送的字符串.

appCodeName:浏览器的代码名

platform:运行浏览器的硬件平台.

打开和操作窗口

打开窗口

Window对象的open()方法可以打开一个新的浏览器窗口.open()方法有四个参数,第一个是url,是在新窗口中显示的文档的URL.如果参数被设为null,则为空白窗口.第二个参数是新打开窗口的名字.如果是已经存在的窗口名字,则使用那个已经存在的窗口.第三个参数是特性列表,这些特性声明了窗口的大小和它的GUI装饰.如果忽略,则使用默认大小.声明的情况下,没有设置的特性被忽略.第四个参数是在第二个参数命名是一个存在的窗口时才有用.它是Boolean的,true为第一个参数指定的URL是应该替换掉窗口浏览器历史的当前项,false为创建新的.

关闭窗口

Window对象的close()方法.使用是,要显示的使用window.close() 

窗口的几何大小

方法moveTo()可以将窗口的左上角移动到指定的坐标.moveBy()可以向上下左右移动指定的像素.方法resizeTo()和resizeBy()可以按照相对的数量和绝对数量调整窗口的大小.

键盘的焦点和可见性

新窗口open后自动聚焦,已存在窗口需要open()后focus().方法focus()和blur()提供了对窗口焦点聚焦和失去焦点的控制.

滚动

scrollBy()会将窗口中显示的文档向上下左右移动指定数量的像素.scrollTo()会将文档滚动到一个绝对位置.

简单的对话框

Window对象提供了3个方法向用户显示简单的对话框.alert(),提示一条信息,等待用户关闭对话框.confirm(),要求用户点击一个OK或者cancel来确认或取消操作.prompt(),请求用户输入一个字符串.这些方法一般用来调试js的时候使用.但是这些方法使用会使后续的程序停止执行.

confirm()的使用示例:

var message="\n\n"+"--------------------\n\n"+"please choose ok!\n"+"--------\n"+"\n\n";

if(!confirm(message))return;

脚本化的状态栏

除了创建不使用状态栏的的浏览器窗口,在每个浏览器的窗口底部都有一个状态栏(status line).这是浏览器向用户显示消息的地方.现在很少使用它,使用时仅仅显示日期,和setInterval()一起使用.

错误处理

现在的js错误只在控制台上显示错误信息.

现在的浏览器大多会支持这些.

多窗口和多帧

一个窗口的任何帧都可以用Window对象的属性frames  parent top来引用其他的帧.任何窗口或者帧中的js代码都可以都可以将自己的窗口和帧引用为window或self.

第二个帧的第三个子帧:frames[1].frames[2]

一个帧引用他的第二个兄弟帧:parent.frames[1]

如果一个窗口时顶级窗口,parent==self

引用当前帧所在的顶级窗口:top

窗口和帧的名字

window.open()中,第二个参数可以是帧的name,这样就可以把结果显示到帧中.

交互窗口中的js

可以跨帧引用js.帧之间的js并不是完全隔离,可以通过帧之间的关系相互引用.

导航栏的示例代码:

function back(){

    document.navbar.url.value="";

    try{  window.history.back();}

    catch(e){   alert("Same-origin policy blocks History.back(): "+e.message);}

    setTimeout(updateURL,1000);

}

function forward(){

     document.navbar.url.value="";

    try{  window.history.forward();}

    catch(e){   alert("Same-origin policy blocks History.forward(): "+e.message);}

    setTimeout(updateURL,1000);  

}

function updateURL(){

     try{ document.navbar.url.value=window.location.href;}

     catch(e){ document.navbar.url.value="<Same-origin policy prevents URL  access>";}

}

function fixup(url){

   if(url.substring(0,7)!="http://")url="http://"+url;

  return url;

}

function go(){

   window.location=fixup(document.navbar.url.value);

}

function displayInNewWindow(){

  window.open(fixup(document.navbar.url.value));

}

html代码:

<form name="navbar" οnsubmit="go();return false;">

       <input type="button" value="Back" οnclick="back();">

       <input type="button" value="Forward" οnclick="forward();">

       URL:<input type="text" name="url" size="50">

       <input type="button" value="Go" οnclick="go();">

       <input type="button" value="Open new window" οnclick="displayInNewWindow();">

</form>