04.初识BOM~初识DOM前（67~77）

Tsugumi
159 阅读11分钟

BOM

1.初识别BOM（介绍）

BOM (Browser Object Model) 是指浏览器对象模型，它提供了与浏览器窗口交互的对象和方法。BOM 不是 W3C 标准的一部分，而是由各个浏览器厂商自行实现的一组 API。

BOM 的主要组成部分包括以下几个对象：

  1. Window 对象：代表浏览器中打开的窗口，它是 BOM 的核心对象。Window 对象包含了很多属性和方法，用于控制浏览器窗口的各种行为，比如打开新窗口、关闭窗口、定时器、浏览器历史记录等。**
  2. Navigator 对象：提供了关于浏览器的信息，比如浏览器的名称、版本、操作系统等。
  3. Screen 对象：代表用户的屏幕，提供了关于屏幕尺寸和颜色深度等信息。
  4. Location 对象：包含了当前窗口的 URL 信息，可以用来获取或设置窗口的 URL。
  5. History 对象：代表浏览器的历史记录，可以用来在浏览历史记录中前进或后退。
  6. Document 对象：虽然 Document 对象属于 DOM（文档对象模型），但它也是 BOM 的一部分，用于表示当前窗口中加载的文档。

BOM 提供了丰富的功能和方法，使开发者能够与浏览器窗口进行交互，控制浏览器的行为，并获取浏览器的相关信息。因为 BOM 不是标准的一部分，所以在不同的浏览器中可能会有一些差异，需要注意兼容性问题。

image.png

2.浏览器可视窗口的尺寸

浏览器可视窗口尺寸指的是浏览器窗口中网页内容可见部分的尺寸，即不包括浏览器的工具栏、滚动条等部分。在 JavaScript 中，可以使用以下代码来获取浏览器可视窗口的尺寸：

var viewportWidth = window.innerWidth || document.documentElement.clientWidth;
var viewportHeight = window.innerHeight || document.documentElement.clientHeight;

console.log("Viewport width: " + viewportWidth);
console.log("Viewport height: " + viewportHeight);

上述代码中，我们首先尝试使用 window.innerWidth 和 window.innerHeight 来获取浏览器可视窗口的宽度和高度。如果这两个属性不可用，我们则回退到使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 来获取相同的尺寸信息。

image.png

需要注意的是，不同浏览器对于这些属性的支持可能会有所差异，特别是在移动设备上。因此，在实际开发中，建议在使用这些属性时进行兼容性处理。

3.浏览器的弹出层

浏览器弹出层通常是指使用 JavaScript 在浏览器中创建的新窗口或者弹出对话框。这些弹出层可以用于展示新的内容、执行交互操作或者显示警告信息。

1. 创建新窗口：

// 打开一个新窗口
var newWindow = window.open('https://www.example.com', 'newWindow', 'width=600, height=400');

上述代码中，window.open 方法会打开一个新的浏览器窗口，指定的 URL（www.example.com）将在这个窗口中加载。第二个参数是窗口的名称，第三个参数是一个包含窗口特性的字符串，比如宽度、高度等。

2. 提示框：

// 弹出一个提示框
alert('这是一个提示信息');

alert 方法用于在浏览器中弹出一个带有消息和确定按钮的提示框。

3. 确认框：

// 弹出一个确认框
var result = confirm('你确定要执行操作吗？');
if (result) {
  // 用户点击了确认按钮
} else {
  // 用户点击了取消按钮
}

confirm 方法用于在浏览器中弹出一个带有消息、确定和取消按钮的确认框，根据用户的选择返回 true 或 false。

4. 提示输入框：

// 弹出一个提示输入框
var userInput = prompt('请输入你的姓名', '默认值');
if (userInput != null) {
  // 用户输入了内容
} else {
  // 用户点击了取消按钮
}

prompt 方法用于在浏览器中弹出一个带有输入框的提示框，用户可以在输入框中输入内容并点击确定或取消按钮。

4.浏览器的地址栏

location.href

location.href 是 window.location 对象的一个属性，它包含了当前文档的完整 URL。你可以使用 location.href 来获取当前页面的 URL，也可以将其设置为新的 URL 以实现页面的导航。

以下是一些示例用法：

获取当前页面的 URL：

var currentUrl = location.href;
console.log(currentUrl);

将页面导航到新的 URL：

// 将页面导航到新的 URL
location.href = "https://www.example.com";

在这个示例中，location.href 被用来获取当前页面的 URL，并将其打印到控制台中。然后，使 location.href 来将页面导航到新的 URL

location.reload

location.reload() 是 window.location 对象的一个方法，用于重新加载当前页面。当调用 location.reload() 时，浏览器将重新加载当前页面，并显示最新的内容。

示例用法：

// 重新加载当前页面
location.reload();

在这个示例中，调用 location.reload() 将会重新加载当前页面，就好像用户点击了浏览器的刷新按钮一样。

需要注意的是，location.reload() 可以接受一个布尔类型的参数，用来指示是否强制从服务器重新加载页面，而不是从缓存中加载。如果参数为 true，则强制从服务器重新加载页面；如果参数为 false 或省略，则从缓存中加载页面。例如：

// 强制从服务器重新加载页面
location.reload(true);

使用 location.reload() 可以在需要时重新加载当前页面，比如在接收到服务器的更新信息时，或者在用户执行了某些操作后需要刷新页面以显示最新的状态。

5.浏览器的常见事件

onload

在HTML中，onload事件是一种事件属性，用于在文档或元素加载完成后触发特定的JavaScript代码。当网页加载完成或元素加载完成时，onload事件就会触发。

例如，可以在标签中添加onload事件来执行特定的JavaScript函数，在页面加载完成后执行该函数。另外，也可以在标签中添加onload事件来在图片加载完成后执行特定的JavaScript代码。

<!DOCTYPE html>
<html>
<head>
  <title>onload事件示例</title>
  <script>
    function pageLoaded() {
      alert('页面加载完成！');
    }
    function imageLoaded() {
      alert('图片加载完成！');
    }
  </script>
</head>
<body onload="pageLoaded()">
  <img src="example.jpg" onload="imageLoaded()">
</body>
</html>

在上面的示例中，当页面加载完成时，会弹出一个提示框显示"页面加载完成！"，当图片加载完成时，也会弹出一个提示框显示"图片加载完成！"。这些提示框是通过onload事件触发的JavaScript函数来实现的。

resize

在 HTML 中，resize 事件是在浏览器窗口或框架大小发生变化时触发的事件。当用户调整浏览器窗口大小或框架大小时，会触发 resize 事件，这使得开发者可以在窗口大小变化时执行特定的 JavaScript 代码。

可以通过 JavaScript 来添加 resize 事件监听器，以便在窗口大小变化时执行相应的操作。下面是一个简单的示例，演示了如何使用 resize 事件：

<!DOCTYPE html>
<html>
<head>
  <title>resize 事件示例</title>
  <script>
    window.onresize = function(event) {
      document.getElementById("demo").innerHTML = "窗口大小发生变化！";
    };
  </script>
</head>
<body>

<p id="demo">调整窗口大小以触发 resize 事件</p>

</body>
</html>

**在上面的示例中，当用户调整浏览器窗口大小时，会触发 resize 事件，然后会执行指定的 JavaScript 代码，将 ID 为 "demo" 的段落的内容更改为 "窗口大小发生变化！"。 **

onsroll

image.png

6.浏览器滚动距离

兼容性

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || docume

image.png

回到顶部功能

在JavaScript中实现回到顶部功能可以使用以下代码：

// 获取回到顶部按钮
var topButton = document.getElementById('topButton');

// 当页面滚动时显示或隐藏回到顶部按钮
window.onscroll = function() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    topButton.style.display = "block";
  } else {
    topButton.style.display = "none";
  }
};

// 点击回到顶部按钮时滚动到顶部
topButton.onclick = function() {
  document.body.scrollTop = 0; // 兼容性处理
  document.documentElement.scrollTop = 0;
};

在上面的代码中，我们首先获取了回到顶部按钮的元素，然后监听页面滚动事件，根据页面滚动的位置来显示或隐藏回到顶部按钮。当点击按钮时，将页面滚动到顶部位置。可以将这段代码放在页面底部的script标签中，或者在页面加载完成时执行这段代码。

image.png

7.浏览器打开标签页面

window.open

window.open 是 JavaScript 中用于在新窗口或新标签页中打开一个 URL 的方法。它的基本语法如下：

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

其中：

  • URL：要打开的 URL 地址。
  • name：窗口的名称，可以是一个已存在窗口的名称，也可以是一个新窗口的名称。
  • specs：一个包含窗口特性的字符串，比如大小、位置等。
  • replace：一个布尔值，指定是在历史记录中生成一个新的条目还是替换当前条目。

例如，下面的代码将在一个新窗口中打开名为 "myWindow" 的页面：

window.open("https://www.example.com", "myWindow", "width=600,height=400");

image.png

window.close

window.close 是 JavaScript 中用于关闭当前窗口的方法。当调用 window.close() 方法时，浏览器会尝试关闭当前的窗口或标签页。

window.close();

需要注意的是，由于安全原因，大多数现代浏览器会阻止通过 JavaScript 关闭非由 JavaScript 打开的窗口。因此，这个方法可能不会在所有情况下都有效。通常情况下，只有通过 JavaScript window.open 方法打开的窗口才能通过 window.close 方法关闭。

image.png

8.浏览器的历史纪录

history.back

image.png

history.forward

image.png

history.go

当用户点击一个按钮时，使用history.go方法可以实现向前或向后导航。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>History.go Example</title>
</head>
<body>
  <button onclick="goBack()">Go Back</button>
  <button onclick="goForward()">Go Forward</button>

  <script>
    function goBack() {
      history.go(-1); // 向后导航一个页面
    }

    function goForward() {
      history.go(1); // 向前导航一个页面
    }
  </script>
</body>
</html>

在这个示例中，当用户点击"Go Back"按钮时，会调用goBack函数，该函数使用history.go(-1)向后导航一个页面。而当用户点击"Go Forward"按钮时，会调用goForward函数，该函数使用history.go(1)向前导航一个页面。

9.浏览器本地存储

localStorage(永久存储)

localStorage 是一个 Web API，允许开发者在浏览器中存储键值对数据。这些数据在页面重新加载或关闭后仍然保留在浏览器中，直到被显式移除。localStorage 中存储的数据是以字符串形式存储的，并且只能存储字符串类型的数据。

以下是一个简单的示例，演示如何使用 localStorage 存储和获取数据：

// 存储数据到 localStorage
localStorage.setItem('username', 'johnDoe');

// 从 localStorage 中获取数据
const username = localStorage.getItem('username');
console.log(username); // 输出 'johnDoe'

在这个示例中，我们使用 setItem 方法将键为 'username'，值为 'johnDoe' 的数据存储到 localStorage 中。然后使用 getItem 方法从 localStorage 中获取存储的数据，并将其打印到控制台上。

// 存储数据到 localStorage
localStorage.setItem('username', 'johnDoe');

// 从 localStorage 中移除数据
localStorage.removeItem('username');

在这个示例中，我们首先使用 setItem 方法将键为 'username'，值为 'johnDoe' 的数据存储到 localStorage 中。然后使用 removeItem 方法从 localStorage 中移除键为 'username' 的数据。

// 存储数据到 localStorage
localStorage.setItem('username', 'johnDoe');
localStorage.setItem('theme', 'dark');

// 清空整个 localStorage
localStorage.clear();

在这个示例中，我们首先使用 setItem 方法将键值对数据存储到 localStorage 中。然后调用 clear 方法清空整个 localStorage，导致所有数据都被移除。

image.png

需要注意的是，localStorage 中存储的数据在同源的所有页面上都是共享的，因此可以在同一域名下的不同页面中访问和修改 localStorage 中的数据。

sessionStorage（临时存储）

sessionStorage 是另一种 Web API，类似于 localStorage，用于在浏览器中存储键值对数据。与 localStorage 不同的是，sessionStorage 中存储的数据仅在当前会话期间有效，即当用户关闭浏览器标签或窗口时，数据将被清除。

以下是一个简单的示例，演示如何使用 sessionStorage 存储和获取数据：

// 存储数据到 sessionStorage
sessionStorage.setItem('username', 'johnDoe');

// 从 sessionStorage 中获取数据
const username = sessionStorage.getItem('username');
console.log(username); // 输出 'johnDoe'

在这个示例中，我们使用 setItem 方法将键为 'username'，值为 'johnDoe' 的数据存储到 sessionStorage 中。然后使用 getItem 方法从 sessionStorage 中获取存储的数据，并将其打印到控制台上。

与 localStorage 类似，sessionStorage 中存储的数据也是以字符串形式存储的，并且仅在当前会话期间有效。

image.png

剩下方法同localStorage一样

10.案例-记住用户名

你可以使用 localStorage 或 sessionStorage 来实现记住用户名的功能。下面是一个使用 localStorage 的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Remember Username</title>
</head>
<body>
  <label for="username">Username:</label>
  <input type="text" id="usernameInput">
  <button onclick="saveUsername()">Save</button>

  <script>
    // 当页面加载时，尝试从 localStorage 中获取已保存的用户名
    window.onload = function() {
      const savedUsername = localStorage.getItem('username');
      if (savedUsername) {
        document.getElementById('usernameInput').value = savedUsername;
      }
    };

    // 当用户点击保存按钮时，将输入的用户名保存到 localStorage
    function saveUsername() {
      const username = document.getElementById('usernameInput').value;
      localStorage.setItem('username', username);
      alert('Username saved!');
    }
  </script>
</body>
</html>

在这个示例中，用户输入用户名后，点击保存按钮将用户名保存到 localStorage 中。每次页面加载时，会尝试从 localStorage 中获取已保存的用户名，并将其显示在输入框中。这样，用户就可以看到他们上次输入的用户名，并且不需要重复输入。

image.png

总结

高数好难！！！！！！！

QQ图片20231108170546.jpg

avatar
文章
阅读
粉丝