创建: 2017/10/11
更新: 2017/10/14 标题加上【WIP】，增加【TODO】
更新: 2018/01/22 更改标题 [客户端JavaScript Web Object, URLEncode] -> [客户端JavaScript Web Object]
给window object部分增加了id
【TODO】
增加: 补充Window的操作，p362
| 客户端JavaScript概要 |
| 植入JavaScript的方法 |
| 《script》中 |
《script》
...
《/script》 |
| 《script》链接外部 |
《script src="..."》《/script》 |
事件句柄里(字符串)
基本不用 |
《... onclick="..." ...》 |
JavaScript: URL
基本不用 |
《a href="..."》...《/a》
href内部制定JavaScript
例: |
|
| 浏览器上的JavaScript处理流程 |
| |
生成Window Object
注: 这是网页的全局变量，一个tab一个 |
| |
生成Window Object的属性Document Object
开始解析网页，构筑DOM
Document
Object的属性readyState 赋值 "loading"
注:
DOM: 文档对象模型(Document Object Model) |
| |
解析网页时候遇到《script》，则同期解析script
解析script是html的解析暂停 |
| |
解析完成，构筑好DOM
Document
Object的属性readyState 赋值 "interactive"
|
| |
浏览器对Document Object发生DOMContentLoaded事件
开始读取img等外部资源 |
| |
读取完成后
Document
Object的属性readyState 赋值
"complete"
浏览器对Window
Object发生load事件 |
| |
自定义的事件等登陆到WindowWObject的load事件上
Window.onload
注: load发生在所有文件读取完成后(包括图象等资源), 会让用户等待
所以可以增加事件监听器，把初期登陆加在DOMContentLoaded
上 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
async
defer |
| async |
非同期读取script
html的读取不会暂停 |
| defer |
html读取完(DOM构筑完成后)读取
可以代替DOMContentLoaded来进行事件登陆 |
|
| |
|
| |
|
| |
|
|
Window
Object |
| 概要 |
全局Object
所有Object都是Window Object的属性
访问时可以省略window. |
| 主要属性 |
| screen |
|
| document |
|
| location |
|
| navigator |
|
| history |
|
| event |
|
| console |
|
| window |
Window自己 |
| self |
和window一样 |
| parent |
window是表格内的window时返回上一层window
否则返回自己 |
| top |
window是表格内的window时返回最上层window
否则返回自己 |
| opener |
返回打开现在窗口的窗口 |
| frames[] |
包含window内各表格的参照 |
| closed |
现在的窗口是否关闭
true/false |
| name |
取得/设置现在窗口的名字 |
| status |
取得/设置状态栏的text |
screenX
screenY |
浏览器在屏幕的位置
IE不支持 |
screenLeft
screenTop |
和上一个相同
Firefox不支持 |
innerHeight
innerWidth |
window高与框(不包含scroll bar) |
outerHeight
outerWidth |
window高与框(包含scroll bar) |
scrollX
scrollY |
水平/垂直方向滚动的像素(pixel) |
pageXOffset
pageYOffset |
和上一个相同 |
| |
|
| |
|
| |
|
|
| 主要方法 |
| |
|
| prompt("...", default) |
|
| confirm("...") |
|
| setTimeout(callback, interval) |
|
| setInterval(callback, delay) |
|
| clearTimeout(timeoutID) |
|
| clearInterval(intervalID) |
|
| blur() |
从当前窗口移除聚焦 |
| focus() |
给指定窗口聚焦 |
| close() |
关闭窗口 |
| open() |
打开新窗口 |
| moveBy(x, y) |
相对移动 |
| moveTo(x, y) |
绝对移动 |
| resizeBy(width, height) |
窗口大小按指定尺寸放大 |
| resizeTo(width, height) |
窗口大小变为指定尺寸 |
| scrollBy(x, y) |
滚动指定距离 |
| scrollTo(x, y) |
滚动到指定位置 |
| print() |
打开确认打印的对话框 |
| |
|
| |
|
|
| |
|
| |
|
| Location
Object |
| |
管理地址栏 |
| 呼出方法 |
location
window.location
document.location |
| 属性 |
| hash |
标签
例:
#anchor |
| host |
主机名: 接口号
例: www.example.com:80 |
| hostname |
主机名
例: www.example.com |
| href |
完整的URL
例: http://www.example.com:80/test/index.html?q=value#anchor
注:
location.assign(...)
location.href = ...两者作用相同 |
| pathname |
相对于主页的相对路径
例: /test |
| port |
接口号
例: 80 |
| protocol |
协议
例: http: |
| search |
请求的字符串
例: ?q=value |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 方法 |
assign(url)
字符串 |
读取指定的url
记录在浏览历史
注:
location.assign(...)
location.href = ...两者作用相同 |
| reload() |
重新读取 |
| replace(url) |
跳向网页
不记录在浏览历史里 |
| toString() |
返回location.href |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| |
|
| URL encode |
| 概要 |
字符串的16进制字符编码以比特为单位用%分隔表示
字母, 数字,
-_!~*.()'不会被转换 |
| 编码方法 |
| |
encodeURIComponent |
| |
encodeURI
不编码字母, 数字, -_!~*.()'不会被转换
和(;,.?:@&=+$),(#) |
|
| 解码方法 |
| |
decodeURIComponent |
| |
decodeURI |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| History
Object |
| |
管理窗口的浏览历史 |
| 呼出方法 |
history
window.history |
| 属性 |
| length |
只可读
现在session的履历数 |
| scrollRestoration |
操作浏览浏览历史后滚动位置是否自动复原
"auto"/"manual" |
| state |
只可读
在pushState, replaceState设定的state的值 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| 方法 |
| back() |
返回一个 |
| forward() |
前进一个 |
| go(number) |
指定移动数
正: 前进
负: 返回 |
| pushState(state, title,
url) |
不跳转并且追加窗口浏览历史
| state |
通过popstate时间的state属性参照 |
| title |
新履历的标题 |
| url |
可省略，省略则为当前url |
| |
|
| |
|
|
| replaceState(state, title, url) |
跳转并且追加窗口浏览历史 |
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| Navigator
Object |
| 概要 |
Navigator 对象包含有关浏览器的信息 |
| 呼出 |
navigator
window.navigator |
属性
只可读 |
只可读
| appCodeName |
浏览器的代码名字
不一定正确 |
| appName |
浏览器的名字
不一定正确 |
| appVersion |
浏览器的版本
不一定正确 |
| geolocation |
表示浏览器物理位置的Geolocation Object |
| language |
浏览器对应的MIME类型的 MimeTypeArray |
| mimeTypes[] |
|
| onLine |
是否连接网络 |
| platform |
系统名
Windows --- "win32"
Mac --- "MacIntel" |
| plugins |
浏览器安装的常见一览
Plugin Object的数组 |
| userAgent |
USER-AGENT header部分传送的字符串 |
|
| 方法 |
| |
是否可以使用Java |
| getUserMedia() |
获取设备的麦克风, 摄像头的流
audio, video |
| registerContentHandler(mimeType, uri,
title) |
把网页和特定mime类型关联 |
| registerProtocolHandler(protocol, uri,
title) |
把网页和特定协议关联 |
| vibrate() |
|
| |
|
| |
|
| |
|
| |
|
| |
|
|
| |
|
| |
|
| |
|
| Screen Object |
| 概要 |
包含显示屏大小以及色数等信息 |
| 呼出 |
screen
window.screen |
属性
只可读 |
只可读
| availTop |
可以使用的最小的y坐标
可用指除了任务栏以外的部分 |
| availLeft |
可以使用的最小的x坐标 |
| availHeight |
可以使用的高度 |
| availWidth |
可以使用的宽度 |
| colorDepth |
豁免的色深度(位数): 约1678万色的话24 |
| height |
画面高度 |
| width |
画面宽度 |
| orientation |
画面方向 |
| |
|
| |
|
|
| |
|
| |
|
| |
|
| Document
Object |
| 概要 |
表示页面内容
接入DOM |
| 呼出 |
document
window.document |
| DOM关联 |
http://blog.sina.com.cn/s/blog_dcb875d90102yc1u.html |
| 主要属性 |
| characterSet |
只可读
使用的字符编码 |
| cookie |
获取cookies
以；分隔的列表(list?) |
| domain |
只可读
主页 |
| lastModified |
只可读
最终更新日 |
| location |
document.location
window.location
location
三个一样 |
| readyState |
只可读
文件读取状况 |
| referrer |
只可读
链接向当前页面的url |
| title |
页面的标题 |
| URL |
只可读
页面的URL |
| |
|
|
| 主要方法 |
| close() |
关闭document.open()打开的页面
终止写入 |
| open() |
为了写入打开页面 |
write(text)
不用 |
写入到document.open()打开的文件 |
| writeIn(text) |
写入到document.open()打开的文件
并换行 |
| |
|
|
| |
|
| |
|
| |
|
| Window的操作 |
| |
暂略，p362 |
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
