BOM的简单讲解

2023-10-03 19:00:34

BOM的对象是window这个对象，是js操作浏览器的API 。可以使用BOM控制浏览器显示的页面以外的部分。window是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性或者说是子对象（Javascript的一切都可以成为对象。可以直接window调用的用window在前，如果是子对象调用，可以省略window。

网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

<script>
  var name = 'zhangsan';
  var sayName = function () {
    console.log(this.name);
  }
  console.log(window.name); //zhangsan
  sayName();  //zhangsan
  window.sayName(); //zhangsan
</script>

1.Window窗口

窗口位置：

window.screenX和window.screenY——属性返回窗口相对于屏幕的X和Y坐标。这个是常用的，符合现在基本的主流浏览器

pageXOffset（pageYOffset）——设置或返回当前页面相对于窗口显示区左上角的 X 位置 (Y位置)

窗口大小：

innerWidth（innerHeight）——页面视图区的宽度（高度）

outerWidth (outerHeight ）——浏览器窗口的宽度 (高度)

screen对象:

screen.width (screen.height) ——屏幕总宽度/高度(像素单位)

screen.colorDepth —— (颜色深度)

screen.pixelDepth ——（颜色分辨率）

2.Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

window.open(URL,name,specs,replace)

3.系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

alert('我是警告框')

<script>
  var result = confirm('你确定吗?');
  if (result) {
    console.log('确定');
  }else{
    console.log('取消');
  }
</script>

<script>
  var result = prompt("你叫什么名字?");
  if (result) {
    console.log(result);
  }else{
    console.log('取消');
  }
</script>

4. location

location对象是最有用的BOM对象之一，提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。

属性

方法

assign() 传递一个url参数，打开新url，并在浏览记录中生成一条记录。

replace() 参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。

reload() 重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

5.history对象

length 返回历史列表中的网址数注意：Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。

back() 加载 history 列表中的前一个 URL

forward() 加载 history 列表中的下一个 URL

go() 加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

6.超时调用和间歇调用

setTimeout() 超时调用

//1秒后开始调用,执行方法中的输出（‘Hello World’）
<script>
  var id = setTimeout(() => {
    console.log('Hello World');
  }, 1000);
  console.log(id);
  // 清除超时调用
  //clearTimeout(id);
</script>

setInterval() 间歇调用

<script>
  var div = document.createElement('div');
  // 间歇调用   动态的显示时间
  var id = setInterval(() => {
    div.innerHTML = new Date().toLocaleString();
  }, 1000);
  document.body.appendChild(div);
  // 清除计时器
  //clearInterval(id);
</script>

码农公寓