恰皮
恰皮

JavaScript 学习笔记（Window对象）《犀牛书》

JavaScript客户端之Window对象

1. 计时器

setTimeout(fn,time);//经过 time 毫秒后调用 fn 函数
setInterval(fn,time); //经过 time 毫秒后重复调用 fn 函数
setTimeout(code,time);//经过 time 毫秒后执行 code 代码
setInterval(code,time); //经过 time 毫秒后重复执行 code 代码
  • code 是另一种语法的应用，是指你想要重复执行的一段字符串构成的代码(使用该语法是不推荐的)
  • 有返回值，传递给clearTimeout() 和 clearInterval()可以取消后续函数的调用
var timer = setInterval(fn,1000);
clearInterval(timer);
  • time 为0时，指定的函数不会立刻执行，会把它放到队列中，等到前面处于等待状态的事件处理程序全部执行完成后，再立即调用它。

2. Window对象的属性

2.1 location属性

  • Window 对象的 location 属性：引用 Location 对象，表示该窗口中当前显示的文档的 URL。

Document对象的location属性：引用Location对象。
window.location === document.location //总是返回true

  • Location 的 href 属性返回 URL 的完整文本。
  • “URL分解”属性：Location 对象的其他属性：protocol,host,hostname,port,pathname,search, 分别表示 URL 的各个部分
  • hash 属性返回 URL 中的片段标识符部分；
  • search 属性返回 ? 之后的 URL ，这些属性是可写的，改变属性的值会改变 URL ，重新载入文档或者在当前文档中跳转
location.search = "?page=" + (pagenum+1);//载入下一个页面
  • 使用 location 跳转页面：
  • Location 对象的 assign() 方法可以使窗口载入并显示指定的 URL 中的文档
  • replace() 方法会在载入新文档之前会从浏览历史中把当前文档删除
  • reload() 方法可以让浏览器重新载入当前文档。
  • 使浏览器跳转到新页面的直接的方法是把新的 URL 赋给 location 属性：
location = "htttp://www.oreilly.com"; //可以使用绝对URL、相对URL，例如片段标识符

2.2 history 属性

  • history 属性引用 History 对象，History 对象是用来把窗口的浏览历史用文档和文档状态列表的形式表示。
  • History 对象的 length 属性表示浏览历史列表中的元素数量，出于安全因素，脚本不能访问已保存的 URL。
  • history.back() : 在浏览历史后退一格；
  • history.forward(): 在浏览历史前进一格；
  • history.go(num) // num：正值表示在浏览历史中向前跳过任意页，负值表示向后跳过任意页
  • 如果窗口包含多个子窗口，子窗口的浏览历史会按时间顺序穿插在主窗口的历史中，这意味着例如主窗口调用 history.back() 可能会导致一格子窗口往回跳转到前一个显示的文档，但主窗口保留当前状态不变。

Document对象的URL属性：文档首次载入保存该文档的URL的静态字符串。

2.3 navigator 属性

  • Window 对象的 navigator 属性引用 Navigator 对象，包含浏览器厂商和版本信息
  • navigator.appName //返回 web 浏览器的全称
  • navigator.appVersion //通常以数字开始，并跟着包含浏览器厂商和版本信息的详细字符串。
  • navigator.userAgent //包含 appVersion 中的所有信息，并且常常也可能包含其他细节。
  • navigator.platform //在其上运行的浏览器的操作系统的字符串。
console.log("appName: \n" + window.navigator.appName);        // Web浏览器的全称，IE为“Microsoft Internet Explorer”，其它为“Netscape”
console.log("appVersion: \n" + window.navigator.appVersion);    // 浏览器的版本信息
console.log("userAgent: \n" + window.navigator.userAgent);        // 浏览器的版本信息（可能比appVersion更详细）
console.log("platform: \n" + window.navigator.platform);        // 浏览器的运行操作系统

2.4 screen 属性

  • Window 对象的 screen 属性引用 Screen 对象，提供有关窗口显示的大小和可用的颜色数量的信息。
  • 属性 width 和 height 指定的是以像素为单位的窗口的大小。
  • 属性 availWidth 和 availHeight 指定的是实际可用的显示大小，排除了想桌面任务栏这样的特性所占用的空间。
  • 属性 colorDepth 指定的是显示的BPP（bits-per-pixel）值，典型的值有16,24,32
console.log("width: " + window.screen.width);        // 屏幕宽度
console.log("height: " + window.screen.height);        // 屏幕高度
console.log("availWidth: " + window.screen.availWidth);        // 屏幕可用宽度
console.log("availHeight: " + window.screen.availHeight);    // 屏幕可用高度

3. 对话框

  • alert("msg") 显示一条消息，等待用户关闭
  • confirm("msg") 显示一条消息，等待用户按确定（返回 true）或取消（返回 false）
  • prompt("msg") 显示一条消息，等待用户输入字符串，并返回字符串的值
  • 这些对话框一般会产生阻塞，代码停止运行，正在载入的文档会停止载入，直到用户按要求响应为止。会破坏用户的浏览体验，所以良好的设计要有节制地使用这些对话框。对话框常用于调试。

4. 多窗口和窗体

  • 打开窗口：
var w = window.open(url,参数2,参数3,参数4);

  • url：要在新窗口显示的文档的 URL ，如果省略，会打开一个空白的新窗口

  • 参数2：新窗口的名字

  • 参数3：一个以逗号分隔的列表，包含大小和各种属性

  • 参数4：布尔值，true：新窗口替换掉窗口浏览历史的当前条目，false：在窗口浏览历史中创建一个新的条目（默认）

  • 关闭窗口：w.close();

已关闭的窗口，代表它的 Window 对象仍然存在，w.closed 属性为 true，它的 document 为 null

  • w.opener 属性引用的是打开它的脚本的 Window 对象
w.open().opener === w;
  • 窗体是通过