如何通过JavaScript BOM操作实现网页与浏览器环境的交互？
- 内容介绍
- 文章标签
- 相关推荐
本文共计863个文字，预计阅读时间需要4分钟。
目录 + Window 对象 + 全局作用域 + 常见事件 + 调节窗口大小 + 定时器 setTimeout + this 指向问题 + location 对象 + 跳转页面 + location 常见方法 + 总结 + Window 对象是 BOM 的核心对象，代表浏览器的实例。
目录
- window对象
- 全局作用域
- 常见事件
- 调节窗口大小
- 定时器setTimeout
- this指向问题
- location对象
- 转跳页面
- location常见方法
- 总结
window对象
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。
全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。来看下面的例子。
我们在全局作用域中定义了一个变量name和一个函数sayName()，它们被自动归在了window对象名下。于是，可以通过window.name访问变量name，可以通过window.sayAge()访问函数sayName()。由于sayName()存在于全局作用域中，因此this.name被映射到window.name，最终显示的仍然是正确的结果。
常见事件
window对象也有一些自己的事件，这里我们用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta www.itcast.cn'; }) var timer = 5; setInterval(function() { if (timer == 0) { location.href = 'www.itcast.cn'; } else { div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页'; timer--; } }, 1000); </script> </body> </html>
location常见方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta www.itcast.cn'); // 不记录浏览历史，所以不可以实现后退功能 // location.replace('www.itcast.cn'); location.reload(true); }); </script> </body> </html>
总结
浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。同时，window对象还是ECMAScript中的Global对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。
- 在使用框架时，每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架。
- top对象始终指向最外围的框架，也就是整个浏览器窗口。
- parent对象表示包含当前框架的框架，而self对象则回指window。
- 使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段或整体性地修改浏览器的URL。
- 调用replace()方法可以导航到一个新URL，同时该URL会替换浏览器历史记录中当前显示的页面。架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架。
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!
本文共计863个文字，预计阅读时间需要4分钟。
目录 + Window 对象 + 全局作用域 + 常见事件 + 调节窗口大小 + 定时器 setTimeout + this 指向问题 + location 对象 + 跳转页面 + location 常见方法 + 总结 + Window 对象是 BOM 的核心对象，代表浏览器的实例。
目录
- window对象
- 全局作用域
- 常见事件
- 调节窗口大小
- 定时器setTimeout
- this指向问题
- location对象
- 转跳页面
- location常见方法
- 总结
window对象
BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。这意味着在网页中定义的任何一个对象、变量和函数，都以window作为其Global对象，因此有权访问parseInt()等方法。
全局作用域
由于window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。来看下面的例子。
我们在全局作用域中定义了一个变量name和一个函数sayName()，它们被自动归在了window对象名下。于是，可以通过window.name访问变量name，可以通过window.sayAge()访问函数sayName()。由于sayName()存在于全局作用域中，因此this.name被映射到window.name，最终显示的仍然是正确的结果。
常见事件
window对象也有一些自己的事件，这里我们用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta www.itcast.cn'; }) var timer = 5; setInterval(function() { if (timer == 0) { location.href = 'www.itcast.cn'; } else { div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页'; timer--; } }, 1000); </script> </body> </html>
location常见方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta www.itcast.cn'); // 不记录浏览历史，所以不可以实现后退功能 // location.replace('www.itcast.cn'); location.reload(true); }); </script> </body> </html>
总结
浏览器对象模型（BOM）以window对象为依托，表示浏览器窗口以及页面可见区域。同时，window对象还是ECMAScript中的Global对象，因而所有全局变量和函数都是它的属性，且所有原生的构造函数及其他函数也都存在于它的命名空间下。
- 在使用框架时，每个框架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架。
- top对象始终指向最外围的框架，也就是整个浏览器窗口。
- parent对象表示包含当前框架的框架，而self对象则回指window。
- 使用location对象可以通过编程方式来访问浏览器的导航系统。设置相应的属性，可以逐段或整体性地修改浏览器的URL。
- 调用replace()方法可以导航到一个新URL，同时该URL会替换浏览器历史记录中当前显示的页面。架都有自己的window对象以及所有原生构造函数及其他函数的副本。每个框架都保存在frames集合中，可以通过位置或通过名称来访问。
- 有一些窗口指针，可以用来引用其他框架，包括父框架。
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注自由互联的更多内容!