天天看点

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

BOM浏览器对象模型

浏览器对象模型也就是说,我们可以把整个浏览器当成对象来处理、操作

打开一个浏览器,整个浏览器去解析一个html页面(document),我们在js代码里面就可以调用浏览器的这些对象

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

JavaScript Window - 浏览器对象模型(BOM)

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。

由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。

Window 对象(JavaScript中所有的东西都属于window对象中的一员,主要用于弹出框)

所有浏览器都支持 window 对象。它表示浏览器窗口(对象)。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

控制台打印出window对象查看里面的成员:

console.log(window);
           

甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");
           

与此相同:

document.getElementById("header");
           

重点(window)

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
Window.setTimeout(code,millisec)
           
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。

setTimeout() 只执行 code 一次。如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

Window 对象方法

alert() 显示带有一段消息和一个确认按钮的警告框。
setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的timeout。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
prompt() 显示可提示用户输入的对话框。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的timeout。
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

moveTo():移动窗口到指定位置

resizeTo():改变窗口大小

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

name:窗口的名称或窗口的目标。

【注】不命名会每次打开新窗口,命名的第一次打开新窗口,之后在这个窗口中加载。

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

History 对象(window对象成员之一,主要用于页面的获取)

History 对象包含用户(在浏览器窗口中)访问过的 URL记录。

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

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

控制台打印history对象:

console.log(window.history);
           

属性:

window.history.length       返回history对象中记录数,历史记录的条数

History 对象方法

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

只有go()方法中有参数    (go(0)刷新)

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

Location 对象(window对象成员之一,主要用于浏览器上地址栏)

Location 对象包含有关当前 URL的信息。

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

window.location == window.document.location   // true

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

js完成页面跳转(href属性):

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)
JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

Location 对象方法

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

行内标签的使用

JavaScript基础(BOM)-Window 对象(定时器、窗口)、History 对象、Location 对象JavaScript Window - 浏览器对象模型(BOM)重点(window)

Location 对象存储在 Window对象的Location属性中,表示那个窗口中当前显示的文档的Web地址。它的href属性存放的是文档的完整 URL,其他属性则分别描述了URL的各个部分。

如有问题请多多谅解!希望给您带来帮助!祝您生活愉快。