认识BOM

zczlsy11

已于 2024-09-18 17:04:53 修改

阅读量874

点赞数 10

分类专栏： javascript 文章标签： javascript

于 2024-08-01 17:52:50 首次发布

本文链接：https://blog.csdn.net/weixin_43063398/article/details/140721516

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

BOM Browser Object Model 是指浏览器对象模型。

BOM其实就是将浏览器的一些功能和信息也转换成一种对象的形式，我们通过操作该对象，可以对浏览器信息进行一些处理。

BOM的核心window对象和其四个属性对象：location、history、navigator、screen。

Location

管理当前访问页面的地址的相关数据，可以修改url地址信息来访问其他地址。

以下方法都可以通过代码导航到其他页面：

location.href = "abc", 它会去默认访问abc文件夹下面的index.html文件。
lcoation.replace() 不会产生新的访问历史记录。
location.assign()。

例如：

   helloCodeText.addEventListener('click', () => {

      // window.open('https://hellocode.fun')
      window.location.href = 'https://hellocode.fun'
    })

这段 JavaScript 代码模拟了 <a> 标签的行为,当用户点击特定元素时,会导航到指定的 URL。这种方式可以用于动态生成链接或在特定事件下触发导航。

了解hash

1.Hash值用于页面内快速跳转: Hash值(#后面的部分)可以用来快速定位到页面中的特定元素位置,而不需要重新加载整个页面. 例如:

<a href="#section1">跳转到Section 1</a>

<div id="section1">Section 1 内容</div>

点击链接会直接跳转到id为section1的元素位置。

2.实现前端路由: 在单页应用中,hash值可以用来表示不同的虚拟"页面". 例如:

http://example.com/#/home
http://example.com/#/about
http://example.com/#/contact

3.hashchange事件: 当URL的hash部分(#后面的内容)发生变化时,会触发hashchange事件. 这允许开发者监听hash的变化并相应地更新页面内容,从而实现前端路由功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hash Route Example</title>
    <style>
        .page {
            display: none;
        }
        .active {
            display: block;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>

    <div id="content">
        <div id="home" class="page">
            <h1>Home Page</h1>
            <p>Welcome to our website!</p>
        </div>
        <div id="about" class="page">
            <h1>About Us</h1>
            <p>We are a company dedicated to creating amazing web experiences.</p>
        </div>
        <div id="contact" class="page">
            <h1>Contact Us</h1>
            <p>Email: contact@example.com</p>
        </div>
    </div>

    <script>
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            
            // 显示指定的页面
            const activePage = document.getElementById(pageId);
            if (activePage) {
                activePage.classList.add('active');
            }
        }

        // 初始加载时显示正确的页面
        function loadInitialPage() {
            const hash = window.location.hash.slice(1) || 'home';
            showPage(hash);HTML
        }

        // 监听 hashchange 事件
        window.addEventListener('hashchange', (e) => {
            // 如果新的 URL 是 http://example.com/#about
            // new URL(e.newURL).hash 会返回 #about
            // newHash 最终的值将是 about
            const newHash = new URL(e.newURL).hash.slice(1);
            showPage(newHash);
            console.log(`Hash changed from ${new URL(e.oldURL).hash} to ${new URL(e.newURL).hash}`);
        });

        // 页面加载时初始化
        window.addEventListener('load', loadInitialPage);
    </script>
</body>
</html>

History

管理页面访问历史记录，可以修改当前的路径地址（不刷新页面）。

pushState与replaceState

很多现代前端路由库确实广泛使用了pushState()和replaceState()这两个方法来实现路由功能。这些方法是HTML5 History API的一部分,为单页应用(SPA)提供了强大的路由管理能力。

以下是一些主要的应用场景:

创建新的历史记录: pushState()方法用于创建新的历史记录条目,同时更新URL。这通常用于:

在用户导航到新"页面"（虚拟）时
需要保留返回上一状态能力的场景

更新当前历史记录: replaceState()方法用于修改当前的历史记录条目,而不创建新条目。常见用途包括:

更新URL中的查询参数而不增加历史栈
动态内容更新时同步URL,但不需要创建新历史记录

单页应用路由:

这两个方法为SPA提供了核心的路由功能:
允许在不刷新页面的情况下更改URL
维护应用状态与URL的同步
实现前进/后退导航功能

这两个方法不会让页面产生具体的跳转，不会重新加载页面，只会让页面的地址栏发生变化。

实验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SPA Example</title>
  <style>
    .page {
      display: none;
    }
    .page.active {
      display: block;
    }
  </style>
</head>
<body>
  <nav>
    <a href="#" data-url="/">Home</a>
    <a href="#" data-url="/about">About</a>
    <a href="#" data-url="/contact">Contact</a>
  </nav>
  <div id="content">
    <div id="home" class="page active">This is the Home page.</div>
    <div id="about" class="page">This is the About page.</div>
    <div id="contact" class="page">This is the Contact page.</div>
  </div>
  <script src="app.js"></script>
</body>
</html>

// 用于在DOM树构建完成后立即执行JavaScript代码, 可以安全地操作DOM元素,因为此时DOM已经准备就绪。
document.addEventListener('DOMContentLoaded', () => {
    const content = document.getElementById('content');
    const links = document.querySelectorAll('nav a');
  
    // 根据URL显示对应的页面内容
    function showPage(url) {
      const pages = content.querySelectorAll('.page');
      pages.forEach(page => {
        page.classList.remove('active');
      });
      const activePage = content.querySelector(`#${url.slice(1)}`) || content.querySelector('#home');
      activePage.classList.add('active');
    }
  
    // 拦截导航链接的默认行为，使用pushState更新浏览器地址栏的URL和状态，并调用showPage显示对应页面
    function navigate(event) {
      event.preventDefault();
      const url = event.target.getAttribute('data-url');
      const stateObj = { page: url };
      history.pushState(stateObj, '', url);
      showPage(url);
    }
  
    // Attach event listeners to navigation links
    links.forEach(link => {
      link.addEventListener('click', navigate);
    });
  
    // 监听浏览器的前进/后退按钮，更新页面内容以反映当前状态
    window.addEventListener('popstate', (event) => {
      const state = event.state;
      if (state && state.page) {
        showPage(state.page);
      } else {
        showPage('/');
      }
    });
  
    // 使用replaceState设置初始状态，并显示对应的页面内容
    const initialState = { page: location.pathname };
    history.replaceState(initialState, '', location.pathname);
    showPage(location.pathname);
  });