JavaScript 客户端JavaScript之 脚本化浏览器窗口

1、计时器

客户端Javascript以全局函数setTimeOut()、clearTimeOut()、setInterval()、clearInterval()提供这一功能。

 

前者是从运行的那一时刻开始，等待多少毫秒以后，执行指定的函数

后者是从运行的那一时刻开始，每隔多少毫秒，执行指定的函数

相当于，一个是单次，一个是循环

clearTimeOut()用来取消规划的函数的执行

clearInterval()是用来取消规划的函数的任何未来调用

代码：

  <form name="form1">
         <input type="button" name="fbtn" value="时间显示" id="bt1" />
     </form>
 window.onload = function () {
     setInterval(function () {
         var t = new Date();

         document.getElementById("bt1").innerText = t.getFullYear() + "-" + t.getMonth() + "-" + t.getDay() + " " + t.getHours() + ":" + t.getMinutes() + ":" + t.getSeconds();
     }, 1000)
 }

2、浏览器Location和History

Location 对象包含有关当前 显示的文档的URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

载入新的文档

location=新的URL

或者使用 reload()和replace()方法 

 

注：window.location与Document.location并不相同，

后者只是一个字符串，大多数情况下 document.location=window.location.href

但存在服务器重写向时，document.location包含的已经是装载的URL，而window.location.href包含的

则是原始请求的URL

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注释：没有应用于 History 对象的公开标准，不过所有浏览器都支持该对象。

History 对象属性

属性	描述
length	返回浏览器历史列表中的 URL 数量。

History 对象方法

方法	描述
back()	加载 history 列表中的前一个 URL。
forward()	加载 history 列表中的下一个 URL。
go()	加载 history 列表中的某个具体页面。

History 对象描述

History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

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

3.1 窗口的几何大小

有几种不同的坐标系统

屏幕坐标描述的是桌面上一个浏览器窗口的位置，它们相对于桌面的左上角来度量。

。

窗口坐标描述的是在web浏览器中的视口的位置，相对于视口的左上角。

文档坐标描述的是一个HTML文档中的位置，相对于文档的左上角。

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

 

 

3.2 Screen对象

提供有关用户显示器的大小和可用的颜色数量的信息

属性width和height是以像素为单位的显示器大小。

creen 对象包含有关客户端显示屏幕的信息。

注释：没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

Screen 对象属性

属性	描述
availHeight	返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth	返回显示屏幕的宽度 (除 Windows 任务栏之外)。
bufferDepth	设置或返回调色板的比特深度。
colorDepth	返回目标设备或缓冲器上的调色板的比特深度。
deviceXDPI	返回显示屏幕的每英寸水平点数。
deviceYDPI	返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled	返回用户是否在显示控制面板中启用了字体平滑。
height	返回显示屏幕的高度。
logicalXDPI	返回显示屏幕每英寸的水平方向的常规点数。
logicalYDPI	返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth	返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval	设置或返回屏幕的刷新率。
width	返回显示器屏幕的宽度。

 

3.3 Navigator对象

 

Navigator 对象

Navigator 对象包含有关浏览器的信息。

注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象集合

集合	描述
plugins[]	返回对文档中所有嵌入式对象的引用。 该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。 虽然 plugins[] 数组是由 IE 4 定义的，但是在 IE 4 中它却总是空的，因为 IE 4 不支持插件和 Plugin 对象。

Navigator 对象属性

属性	描述
appCodeName	返回浏览器的代码名。
appMinorVersion	返回浏览器的次级版本。
appName	返回浏览器的名称。
appVersion	返回浏览器的平台和版本信息。
browserLanguage	返回当前浏览器的语言。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。
cpuClass	返回浏览器系统的 CPU 等级。
onLine	返回指明系统是否处于脱机模式的布尔值。
platform	返回运行浏览器的操作系统平台。
systemLanguage	返回 OS 使用的默认语言。
userAgent	返回由客户机发送服务器的 user-agent 头部的值。
userLanguage	返回 OS 的自然语言设置。

Navigator 对象方法

方法	描述
javaEnabled()	规定浏览器是否启用 Java。
taintEnabled()	规定浏览器是否启用数据污点 (data tainting)。

 

 

 

大多数现代浏览器支持一种有用的滚动方法

这就是任意的HTML元素上调用scrollIntoView()方法，

当然focus()也是如此，还可利用锚 <a href="#tab2"/>

window.location.hash="#tab2"

window.location.replace("#tab2")  相比上面一种，不会产生新的历史项

来使元素在视口可见

 

 

脚本化状态栏

设置window.status的值

window.defaultstatus

 

错误处理

window.onerror=function(){}

如果给这个属性赋一个函数，那么只要这个窗口发生了JavaScript错误，这函数就会被调用。

传递给错误处理函数程序有三个：

1、错误信息

2、发生错误的js所在的文档的URL

3、文档中发生错误的行代码

 

 

多窗口和多帧

 

1、帧之间的关系

window.opener属性，打开创建此窗口的原始窗口。

 

一个窗口中的任何帧都可以使用window对象的属性 frames parent和top属性来引用其他的帧。

 

窗口和帧的名字

窗口的名字open时由第二个参数决定，

帧的名字由name属性指定

 

指定名字的一个重要原因是那个名字可以用作标记<a> 或 <form>的属性target 的值，这样就可以告诉浏览器把激活

链接或者提交表彰的结果显示在那里。

给帧命名可以唯一确定一个帧，

如<frame name="table_of_contents" src="toc.html"></frame>

 

这样就可以从这个帧的兄弟帧中引用它

parent.table_of_contents

比以下访问方式更可靠 

parent.frames[1]

 

14.8.3交互窗口中的JavaScript

 

每个帧都是一个独立的JavaScript执行环境。

虽然不同帧中的JavaScript代码是在不同的作用域中执行的，但是这并不妨碍一个帧中的代码引用

并使用另一个帧中的代码定义的变量的函数。

通过使用frames parent top来引用 

注：因为是词法作用域，所以函数在定义它的作用域中执行，而不是在调用它的作用域中执行。