《十》Javascript中的BOM

最新推荐文章于 2024-04-08 20:36:59 发布

花铛

最新推荐文章于 2024-04-08 20:36:59 发布

阅读量317

点赞数

分类专栏： JavaScript 文章标签： Javascript

本文链接：https://blog.csdn.net/wsln_123456/article/details/84840366

版权

JavaScript 专栏收录该内容

55 篇文章 1 订阅

订阅专栏

BOM：是 browser object model 的缩写，简称浏览器对象模型，BOM 提供了独立于内容而与浏览器窗口进行交互的对象，用来访问和操作浏览器窗口。

window 对象：

window 对象表示浏览器中打开的窗口。是 JS 里面最大的最外围的对象，所有 javascript 全局对象、函数、一级变量均自动成为 window 对象的成员。

属性：

name：窗口名称。
document：浏览器中加载页面的文档对象。
location、history、screen、navigator 等。

在应用有 frameset 或者 iframe 的页面，window.self 是对当前窗口自身的引用，window.top 返回顶层窗口，window.parent 返回父窗口。

方法：

window 对象对应着 Web 浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window 对象提供的主要功能分为以下几类：

系统对话框：
- alert(str)：消息对话框，显示str字符串的内容。
- confirm(str)：确认对话框，显示str字符串内容，按确定按钮返回 true，其他操作返回 false。
- prompt(str, value)：输入对话框，采用文本框输入信息。str 为提示信息，value 为初始值。
打开、关闭新窗口：
- window.open(url, name, config)：打开窗口。
  
  url：要打开的新页面的链接。
  name：窗口的名称。 name可以是自定义的名称，或者：_blank：在新窗口显示；_self：在当前窗口显示；_parent：在父窗口显示；_top：在顶层窗口显示。
  config：窗口的配置参数。
```
//page.html 将在新窗口 newWindow 中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。
window.open ('page.html','newWindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') 
```
- window.close()：关闭窗口。
  window.close()在 Firefox 不能使用，是因为 Firefox 默认不能关闭用户打开的网页。
  解决方案：
  1. 利用 js 中的 window.open()，火狐必须是 js 打开的页面，才能用 window.close()关闭。所以可以 window.open(“页面地址”）跳转到当前页面。
  2. 利用 a 标签，在火狐中，在父窗口打开的页面用 window.close() 不能关闭。所以利用 a 标签跳转到这个页面需要target=”_blank”。
调整窗口的大小和位置等：
- focus()、blur()：窗口获得焦点、失去焦点。
- moveBy()、moveTo()：移动窗口。
- resizeBy()、resizeTo()：调整窗口大小。
- scrollBy()、scrollTo()：滚动窗口中网页的内容。
定时操作：多用于网页动态时钟，制作倒计时，跑马灯效果等。
- setInterval(exp,time)：周期性触发代码，以一定的时间间隔重复执行代码，循环往复。exp：执行语句。 time:时间周期，单位为毫秒。
```
setInterval(alert(‘hello’),3000);
```
- clearInterval(tID)：停止启动的定时器。
```
var timer=setInterval(alert("Hello"), 3000);

clearInterval(timer);
```
- setTimeout(exp,time)：一次性触发代码exp，在一个设定的时间间隔之后执行代码。
- clearTimeout(tID)：停止启动的计时器。

location 对象：

location 对象是管理地址栏的内置对象，包含了浏览器当前的 URL 信息。常用于获取和改变当前浏览的网址。

属性：

http://127.0.0.1:8020/program/index.html?articleId=848403

location.href：获取或设置整个url。http://127.0.0.1:8020/program/index.html?articleId=848403
location.protocol：获取或设置url的协议。http
location.host：获取或设置url的主机名。127.0.0.1:8020
location.port：获取或设置url的端口号。8020
location.pathname：获取或设置文件的路径./program/index.html
location.hash：获取或设置url的#号及#号后面的参数(页面的标签值)。

# 代表页面中的一个位置，其右边的字符，就是该位置的标识符。浏览器读取 url 后，会自动将这个位置滚动至可视区域。
单单改变 # 后面的内容，浏览器只会滚动到相应位置，不会重新加载网页。
每一次改变 # 后面的内容，都会在浏览器的访问历史中增加一个记录，使用后退按钮，就可以回到上一个位置。
# 是用来指导浏览器动作的，对服务器完全无用，所以 HTTP 请求中并不包含 #。只有将 # 转码为 %23，浏览器才会将其作为实义字符处理。
location.search：获取或设置url的?号及?号后面的参数。?articleId=848403