Web 开发基础

Size: px

Start display at page:

Download "Web 开发基础"

秉衡
4 years ago
Views:

1 Web 开发技术 JavaScript 2.2 BOM

2 内容提要 1 BOM 2 window 对象 3 location 对象 4 navigator 对象 5 history 对象 2

3 1 BOM BOM(Browser Object Model, 浏览器对象模型 ) BOM 提供一系列访问浏览器功能的对象 BOM 提供的功能与具体的网页内容无关是 JS 组成的一部分, 主要方面已纳入 HTML5 规范, 如弹出新的浏览器窗口移动关闭浏览器窗口以及调整窗口大小提供 Web 浏览器详细信息的定位对象提供用户屏幕分辨率详细信息的屏幕对象对 cookie 的支持 3

4 1 BOM BOM 主要提供的对象和功能 window 对象 : 访问浏览器接口和 Global 对象 (4.1.4 节 ) 以下对象均为 window 对象的属性 location 对象 : 提供当前窗口加载的文档有关信息, 如 URL 服务器名等 navigator 对象 : 提供浏览器和客户端的信息, 如浏览器名称和操作系统等 history 对象 : 保存当前标签页的上网记录 4

5 2 window 对象 " 双重角色 " 作为 Global 对象所有在全局作用域中声明的变量函数都是 window 对象的属性和方法通过 JavaScript 访问浏览器窗口的接口窗口大小导航和打开窗口间歇调用和超时调用系统对话框 5

6 2.1 window: 作为 Global 对象所有在全局作用域中声明的变量函数都是 window 对象的属性和方法 function setglobalvar() { window.name = bj"; corporation = "BJ"; } Demo 3.0 alert(typeof name); alert(typeof corporation); // string // undefined 6

7 2.2 window: 作为访问浏览器接口窗口位置 screenx 属性 : 浏览器窗口相对屏幕左侧的位置 screeny 属性 : 浏览器窗口相对屏幕顶部的位置 alert(window.screenx); alert(window.screeny); Demo 3.1 7

8 2.2 window: 作为访问浏览器接口窗口大小 innerheight 属性 : 页面视图容器 ( 实际页面 ) 的高度 innerwidth 属性 : 页面视图容器 ( 实际页面 ) 的宽度 Demo 3.2 outerheight 属性 : 浏览器窗口本身的高度 outerwidth 属性 : 浏览器窗口本身的宽度可以根据页面的实际尺寸动态计算位置 8

9 2.2 window: 作为访问浏览器接口跳转或弹出窗口 open(url, [target, features, replace]) 方法跳转或弹出新窗口 URL(string): 要加载的 URL target(string) 窗口目标 : 在具有该名称的窗口或框架中加载 URL _self: 在当前窗口载入新 URL _blank: 弹出新窗口加载新 URL features(string) 特性 : 根据该特性创建新窗口 replace(boolean) 是否要新页面取代浏览历史记录中当前加载页面 Demo 3.3 /* 在本窗口中打开, Chrome */ window.open(" "_self"); /* 在新标签页中打开尺寸为 100*100 的新标签页, Chrome */ window.open(" "_blank", "width=100,height=100"); 9

$2.2 window: 作为访问浏览器接口跳转或弹出窗口设置参数 target= _blank 时部分浏览器具有拦截弹出式窗口功能, 防止广告 /* 判断窗口是否被浏览器扩展或其他窗口屏蔽 */ var blocked = false; try { var newtag = window.$

10 2.2 window: 作为访问浏览器接口跳转或弹出窗口设置参数 target= _blank 时部分浏览器具有拦截弹出式窗口功能, 防止广告 /* 判断窗口是否被浏览器扩展或其他窗口屏蔽 */ var blocked = false; try { var newtag = window.open(" "_blank"); if (newtag == null) { blocked = true; } } catch (ex) { blocked = true; } if (blocked) { alert("the popup was blocked!"); } Demo

11 2.2 window: 作为访问浏览器接口跳转或弹出窗口设置参数 target= _blank 时部分浏览器具有拦截弹出式窗口功能, 防止广告 Demo 3.3 <! 直接在 HTML 的 <a> 标签中设置 target= _blank 属性, 不会被拦截 --> <a href=" target= _blank > 打开新标签 </a> 11

12 2.2 window: 作为访问浏览器接口 Demo 3.4 系统对话框 prompt(message, default) 弹出提示框, 包含文本输入域和确认按钮 message: 要显示给用户的文本提示 default: 文本输入域的默认值若用户输入并点击 " 确定 ", 返回输入值如果用户点击 " 取消 ", 返回 null var result = prompt(" 请输入姓名 ", "Wang"); if (result!= null) { document.write(result); alert("welcome, " + result); window.print(); } 12

13 2.2 window: 作为访问浏览器接口 Demo 3.4 系统对话框 alert(message): 弹出警告框 confirm(message): 弹出确认对话框返回 true/false print(): 显示 " 打印 " 对话框 13

14 2.2 window: 作为访问浏览器接口 Demo 3.4 倒计时 14

15 2.2 window: 作为访问浏览器接口超时调用 settimeout(function/string, millisecond) 将需要执行的代码加入任务队列中, 并在指定时间过后执行代码 function/string: 使包含 JS 代码的字符串 ( 如 eval() 参数,4.1.4 节 ), 也可以是一个函数 millisecond: 第二个参数表示 millisecond 毫秒后执行代码返回 string 类型的 ID, 唯一标识计划执行代码, 可以用它取消超时调用取消超时调用 cleartimeout(id) 取消尚未执行的超时调用计划 15

16 2.2 window: 作为访问浏览器接口超时调用 settimeout(function/string, millisecond) Demo 3.7 例 : 倒计时跳转至其他页面的 settimeout() 实现 <span id="timer">4</span> 秒后跳转至主页...<span></span> <script> var x = 3; settimeout(go, 1000); window.onload = function () { function go() { if (x >= 1) { document.getelementbyid("timer").innertext = x; settimeout(go, 1000); } else { window.open(" "_self"); } x--; } </script> 16

17 2.2 window: 作为访问浏览器接口间歇调用 setinterval(function/string, millisecond) function/string: 使包含 JS 代码的字符串 ( 如 eval() 参数,4.1.4 节 ), 也可以是一个函数 millisecond: 第二个参数表示 millisecond 毫秒后执行代码返回 string 类型的 ID, 唯一标识计划执行代码, 可以用它取消超时调用取消超时调用 cleartimeout(id) 取消尚未执行的超时调用计划 17

18 2.2 window: 作为访问浏览器接口间歇调用 setinterval(function/string, millisecond) Demo 3.6 例 : 倒计时跳转至其他页面的 setinterval() 实现 <span id="timer">4</span> 秒后跳转至主页...<span></span> <script> var id = setinterval(go, 1000); var x = 3; function go() { if (x >= 1) { document.getelementbyid("timer").innertext = x; } else { clearinterval(id); window.open(" "_self"); } x--; } </script> 18

19 3 location 对象保存当前文档信息并解析 URL location 对象属性 : 属性名说明实例 href 返回完整 URL " host 返回网站名和端口号 ( 若存在 ) " hostname 返回网站名 " protocol 返回使用的协议 "http" port 返回端口号 "80" hash 返回 URL 中 # 和后面的字符 (hash) "#part1" pathname 返回 URL 中的目录或文件夹名 "/course/web_design/" search 返回 URL 的查询字符串 "?q= 19

20 20

21 3 location 对象 : 位置操作修改 location 属性改变当前加载的页面 // 初始 URL: // 将 URL 修改为 location.url = // 将 hash 修改为 #live-demo location.hash = "#live-demo" 21

22 3 location 对象 : 位置操作使用 assign(url) 方法传递 URL, 改变浏览器位置并生成历史记录 // 初始 URL: // 将 URL 修改为 location.assign(" 使用 replace(url) 方法传递 URL 只改变浏览器位置, 不生成历史记录, 无法使用后退功能 // 初始 URL: // 将 URL 修改为 location.replace(" 22

23 3 location 对象 : 位置操作使用 reload([reload]) 方法重新加载当前页面若页面从上次请求以来无改动, 直接从浏览器缓存中重新加载 reload = true: 强制重新从服务器加载页面 // 初始 URL: // 刷新当前页面 location.reload(); 23

24 4 navigator 对象通过 navigator 对象识别浏览器 navigator 对象中保存浏览器和客户端的部分厂商版本信息不同浏览器的 navigator 实现不一致, 标准不统一由于历史原因, 存在浏览器品牌的伪装和欺骗, 使得直接检测浏览器困难, 需要比对隐藏的特征字符串 24

25 Edge Firefox Chrome 的 navigator 对象大量属性的值相同可通过对比 useragent 属性检测浏览器 25

26 5 history 对象 history 对象保存着用户上网的历史记录, 但不能直接查看历史记录的 URL 可通过调用 history 对象方法在历史记录中向前或向后跳转网页 history.go(pages) pages(int): 跳转页数正数表示向前跳转, 负数向后跳转 history.back() 等同 history.go(-1) history.forward() 等同 history.go(1) // 后退一页 history.back(); // 前进一页 history.forward(); 26

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK

關於本書 l 3 PhoneGap Appcelerator Titanium Sencha Touch (wrapper framework) Native App PhoneGap Build Native App Hybrid App Java Objective-C Android SDK 2 l 跨裝置網頁設計 Android ios Windows 8 BlackBerry OS Android HTML 5 HTML 5 HTML 4.01 HTML 5 CSS 3 CSS 3 CSS 2.01 CSS 3 2D/3D PC JavaScript