js权威指南之脚本化浏览器窗口

1计时器
使用setTimeout还有一个有用的技巧,就是注册一个函数在延迟0微秒后调用。这段代码没有立刻调用但是会“尽可能快地”运行。实际上,setTimeout告诉浏览器,当它为当前任何挂起的事件运行完事件句柄并且完成了文档的当前状态的更新之后,就调用该函数。查询或修改文档内容的事件句柄有时候必须使用这种技术来延迟它们的代码的执行,直到文档处于一个稳定的状态。

2浏览器Location和History
窗口location属性引用Location对象,它代表窗口或帧中当前显示的文档的URL。Location对象的href属性是一个字符串,它包含URL的完整文本。Location对象的toString()方法返回href属性的值,因此可以使用location代替location.href,这个对象的其他属性分别声明了URL的各个部分(protocol,host,pathname,search等)
Location对象的search属性包含的是问号之后的那部分URL,这部分通常是某种类型的查询字符串。
通用的getArgs()函数的定义:
可以给location属性赋值一个字符串,浏览器把它解释为一个URL,并试图用这个URL载入和显示文档。
Location对象有两种实现载入页面的方法,方法reload()会从web服务器上再次装入当前显示的页面。方法replace()会装载并显示指定的URL,指定的URL会替换浏览器历史列表中的当前URL,而不是在历史列表中创建一个新条目。而将URL赋给location属性则是创建新条目。
不要混淆Window对象的location属性和Document对象的location属性,前者引用一个Location对象,后者是一个只读字符串。document.location与document.URL是同义的,后者是该属性的首选名称。大多情况下,document.location和location.href相同,但服务器重定向时,document.location包含已经装载的URL,而location.href包含原始请求的文档的URL
History对象
Window对象的history属性引用该窗口的History对象,它最初是用来把窗口的浏览历史构造成最近访问过的URL的数组,但这样不安全,故最终其数组元素不能被访问,但支持三个方法,back()和forward()可以在窗口或帧的浏览历史中前后移动,用前面浏览过的文档替换当前显示的文档,与浏览器的back和forward按钮作用相同。第三个方法go()有一个整数参数,可在历史列表中向前或向后跳过多页。
3获取窗口,屏幕和浏览器信息
窗口的几何大小:
除IE外的大多数浏览器支持Window对象上的一组简单的属性,它们可以获取有关窗口大小和位置的信息
上述属性是只读的,IE将这些窗口几何属性放置在HTML文档的<body>上,而更令人混淆的是,IE6在用<!DOCTYPE>声明显示一个文档时,把这些属性放在document.documentElement元素上,而不是document.body元素上,IE8上两个都有,两者的值有差异。
Screen对象:
Window对象的screen属性引用Screen对象,属性width,height指定以像素为单位的显示器的大小,属性availWidth和availHeight指定实际可用的显示大小,它们排除了像桌面任务栏这样的特性所占用的空间。
Navigator对象:
Window对象的navigator属性引用包含Web浏览器总体信息Web浏览器总体信息的Navigator对象。Navigator对象的命名是为了纪念Netscape Navigator
Navigator对象的提供浏览器版本信息的5个属性:
appName:web浏览器的简单名称
appVersion:浏览器版本号和其他版本信息
userAgent:浏览器在它的USER-AGENT  HTTP头部中发送的字符串
appCodeName:浏览器代码名
platform:运行浏览器的硬件平台
由于浏览器嗅探代码部署在旧的、已有的web页中,以至于厂商无法通过更新这些属性来终止向后兼容,浏览器嗅探正逐渐被功能测试取代
4 打开和操作窗口
打开窗口:
window.open()方法有四个可选的参数,返回的是代表新打开的窗口的Window对象。
第一个参数是要在新窗口中显示的文档的URL
第二个参数是新打开的窗口的名字,这个名字可以作为<a>标记或<form>标记的target属性的值,如果指定的是一个已经存在的窗口的名字,那么open()使用的就只是那个已经存在的窗口,而不是再打开一个新窗口。
第三个参数是特性列表,这些特性声明了窗口的大小和它的GUI装饰,若指定了这个参数,就可以明确地规定新窗口的大小和要具有的特性
eg  要打开一个较小的可调整的浏览器窗口,它具有状态栏,但没有菜单栏、工具栏和地址栏,代码如下:
var w= window.open("smallwin.html","smallwin","width=400,height=100,status=yes,resizable=yes");
第四个参数只在第二个参数命名的是一个存在的窗口时才有用,它是一个布尔值,声明了由第一个参数指定的URL是应该替换掉窗口浏览历史的当前项(true),还是新创建一个项(false),后者是默认设置
窗口的opener属性引用的是打开它的窗口,若当前窗口由用户而非js代码打开,则其opener属性为null
关闭窗口:
为避免混淆Window对象的close()方法和Document对象的close()方法,要显式使用Window对象
大多数浏览器只允许自动关闭由自己的js代码创建的窗口,若要关闭其他窗口,可用对话框提示用户,要求用户确认。
即使一个窗口关闭了,代表它的Window对象仍然存在,但除了检测它的closed属性外,就不应再使用它的其他属性或方法了,如果窗口被关闭,则属性为true
窗口的几何大小:
移动窗口和重新设置窗口大小是对用户权限的一种侵犯,所以仅将方法列举如下:
moveTo():将窗口左上角移动到指定坐标
moveBy():将窗口上移、下移或者左移、右移指定数量的像素
resizeTo()和resizeBy():按照相对数量和绝对数量调整窗口大小
键盘焦点和可见性:
方法focus()和blur()提供了对窗口的高级控制。调用focus()会请求系统将键盘焦点赋予窗口,调用blur()会放弃键盘焦点,此外,(在窗口上调用)方法focus()还会把窗口移到堆栈顺序的顶部,使窗口可见,即将其置于视图的最上一层。
滚动:
scrollBy()会将窗口中显示的文档向左、右、上、下滚动指定数量的像素。
scrollTo()会将文档滚动到一个绝对位置,它将移动文档以便在窗口文档区的左上角显示指定的文档坐标
现代浏览器中,文档的HTML元素有offsetLeft和offsetTop属性来指定元素的X坐标和Y坐标
滚动的另一种方法是调用文档元素(如表单字段或按钮)的focus()方法,它可以接收键盘焦点。作为把焦点传递到元素的过程的一部分,滚动文档以使元素变得可见。注意,这并不一定把指定的元素放置到窗口的左上角,但是可以确保元素在窗口中的某个位置可见
用<a name=>标记来定义锚,然后通过Location对象的hash属性来使用这些锚名
eg 在文档的开头定义了一个名为"top"的锚,可以像下面这样跳转到顶部
window.location.hash = "#top"
它有一些缺点,就是如果用javascriptURL将上述语句加入某锚的href,<a href="javascript:window.location.hash='#top'",在第二次点击此锚的时候,无法重新跳转,而直接用<a href="#top">则没有这样的问题
并且这样会在浏览器中产生历史项,可以通过window.location.replace("#top");
一个使用前面用到的技术的例子如下:

5 简单的对话框
三种产生对话框的方式alert,prompt,confirm均会因阻塞破坏用户体验,所以一般用在调试的时候,而对话框的标题栏通常会显示javascript,它使对话框清晰,防止黑客利用其欺骗用户
6 脚本化状态栏
window的defaultStatus属性在有些浏览器中可以使用
7 错误处理
Window对象的onerror属性定义错误处理句柄,当js错误发生时,调用它。
当一个js错误发生时,传递给错误处理程序的参数有三个:
第一个是描述错误的消息
第二个是一个字符串,存放引发错误的js代码所在的文档的URL
第三个是文档中发生错误的行代码
onerror处理程序的返回值很重要,如果onerror返回true,它通知浏览器句柄已经处理错误,无需其他操作
开发阶段处理错误的代码可以如下:
//Display error messages in a dialog box,but never more than 3
window.onerror = function(msg,url,line){
if(onerror.num++ < onerror.max){
alert("ERROR: "+msg+"\n"+url+":"+line);
return true;
}
}
onerror.max = 3;
onerror.num =0;

8 多窗口和多帧
任何窗口或帧中的js代码都可以将自己的窗口和帧引用为window或self.每个窗口有一个frames属性,它引用一个Window对象的数组,每个元素代表该窗口中包含的帧。每个窗口的parent属性引用包含该窗口的Window对象,若窗口为顶级窗口,则parent属性引用窗口本身,top属性是一个通用的快捷方式,无论帧被嵌套了几层,它的top属性均引用包含它的顶级窗口。顶级窗口的top属性引用自身。
窗口和帧的名字:
window.open()方法第二个参数是新创建的窗口的名字,创建帧时可以使用属性name为这个帧指定一个名字,名字可以用作标记<a>或<form>的属性target的值,这样就可以告诉浏览器把激活链接或者提交表单的结果显示在哪里。
eg 假定有两个窗口,一个名为b,另一个名为c,在名为b的窗口中有如下代码
<a href="d.html" target="c">content</a>
点击链接会将URL指定的文档装载进名为c的窗口中,如果c不存在则创建一个名为c的窗口
交互窗口中的js:
在帧A中声明了一个函数f,则它只在帧A中有定义,兄弟帧B只能通过如下方式引用它
parent.frames[0].f();
但在调用的时候需牢记词法作用域规则,函数在定义它的作用域中执行,而不是在调用它的作用域中执行。

我们知道构造函数也是函数的一种,所以当用构造函数和一个相关的原型对象来定义一个对象的类时,那个类只是为一个窗口定义的:
例子:
<head>
<script src="Complex.js"></script>
</head>
<frameset rows="50%,50%">
<frame name="frame1" src="frame1.html">
<frame name="frame2" src="frame2.html">
</frameset>
frame1和frame2中不能如下定义Complex对象
var c = new Complex(1,2)
相反,应显式引用构造函数
var c = new top.Complex(3,4)
预定义的构造函数:
和用户定义的构造函数不同,预定义的构造函数会在所有窗口中自动进行预定义,但要注意,每个窗口都有一个构造函数的独立副本和一个构造函数原型对象的独立副本。例如在一个窗口中为String.prototype类添加一个类方法,该窗口中的所有字符串都可以使用这个新方法,但别的窗口中定义的字符串不能使用此方法,注意,哪个窗口具有对字符引用并不重要,重要的是那个字符串是由哪个窗口创建的,但经过测试表明,实际情况是在哪个窗口中定义了方法,只有在那个窗口中才能使用该方法,不管字符串是由哪个窗口创建的
一个使用了上述内容的例子如下:
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值