JavaScript part5—BOM常见对象及其属性和JS操作BOM

BOM常见对象及其使用JS操作

BOM（Browser Object Model，浏览器对象模型）是 JavaScript 操作浏览器功能的接口，它以 window 为核心

window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。

image-20251116152026607

window 是 BOM 的顶层对象，代表整个浏览器窗口，所有 BOM 对象都是 window 的属性。

• 全局变量和全局函数会自动成为 window 的属性（例如 window.alert() 可简写为 alert()）。
• window 可省略（如 window.location 可简写为 location）。

window.location：控制地址栏与页面跳转

location 对象管理当前页面的 URL 信息，可用于获取 URL 细节或跳转页面。

属性 / 方法	说明
href	获取或设置完整 URL（最常用，用于页面跳转）。
protocol	协议（如 http:、https:）。
host	主机名 + 端口（如 www.baidu.com:80）。
hostname	主机名（如 www.baidu.com）。
pathname	URL 中的路径（如 /search）。
search	URL 中的查询字符串（如 ?id=1&name=test）。
hash	URL 中的哈希（锚点，如 #top，常用于单页应用路由）。
reload()	刷新当前页面（参数 true 表示强制从服务器刷新，不使用缓存）。
assign(url)	跳转到指定 URL（会在历史记录中添加新记录，可后退）。
replace(url)	跳转到指定 URL（替换当前历史记录，不可后退到原页面）。
origin	协议 + 主机名 + 端口（只读属性，无法修改）

// 获取当前 URL
console.log(location.href); // 输出完整 URL，如 "https://example.com/path?name=test#top"

// 跳转页面（常用）
location.href = "https://baidu.com"; // 直接赋值 href 跳转

// 刷新页面
location.reload(); // 普通刷新
location.reload(true); // 强制刷新（忽略缓存）

// 替换当前页面（无法后退）
location.replace("https://google.com");

location 对象演示

当前 URL:

协议:

主机名:

显示URL信息 刷新页面 跳转到示例网站

window.history：操作浏览器历史记录

history 对象管理浏览器的访问历史，可实现前进、后退等操作（类似浏览器的 “前进 / 后退” 按钮）。

方法 / 属性	说明
length	历史记录的数量（当前页面为起点，包含前进和后退的页面数）。
back()	后退一页（相当于点击浏览器 “后退” 按钮）。
forward()	前进一页（相当于点击浏览器 “前进” 按钮）。
go(n)	跳转到历史记录中第 n 个页面（n=1 前进一页，n=-1 后退一页，n=0 刷新）。

// 查看历史记录数量
console.log(history.length); // 输出当前历史记录条数

// 后退一页
history.back();

// 前进一页
history.forward();

// 后退两页
history.go(-2);

// 刷新当前页
history.go(0);

history 对象演示

历史记录数量:

查看历史记录数 后退 前进 刷新页面

window.navigator：获取浏览器与设备信息

navigator 对象包含浏览器的标识信息（如浏览器类型、版本、设备类型等），常用于做浏览器兼容性处理或设备判断。

常用属性	说明
userAgent	浏览器的用户代理字符串（包含浏览器类型、版本、操作系统等信息）。
platform	运行浏览器的操作系统平台（如 Win32、MacIntel、Linux x86_64）。
appName	浏览器名称（现代浏览器多返回 Netscape，兼容性差，少用）。
appVersion	浏览器版本信息（包含内核版本等）。
language	浏览器的默认语言（如 zh-CN、en-US）。
onLine	布尔值，表示浏览器是否联网（true 为在线，false 为离线）。

// 判断是否为移动设备（通过 userAgent 包含手机关键词）
const isMobile = /Mobile|Android|iPhone/.test(navigator.userAgent);
console.log('是否为移动设备：', isMobile);

// 判断是否联网
console.log('是否在线：', navigator.onLine);

// 获取浏览器语言
console.log('默认语言：', navigator.language);

navigator 对象演示

显示设备信息

<script>     function showNavigatorInfo() {       const info = `         <p>浏览器信息: ${navigator.userAgent}</p>         <p>平台: ${navigator.platform}</p>         <p>语言: ${navigator.language}</p>         <p>是否在线: ${navigator.onLine ? '是' : '否'}</p>         <p>是否为移动设备: ${/Mobile|Android|iPhone/.test(navigator.userAgent) ? '是' : '否'}</p>       `;       document.getElementById('navigatorInfo').innerHTML = info;     }   </script> </div>

window.screen：获取屏幕信息

screen 对象包含用户设备屏幕的信息（如分辨率、可用区域等），常用于适配不同屏幕尺寸。

常用属性	说明
width	屏幕的总宽度（像素）。
height	屏幕的总高度（像素）。
availWidth	屏幕的可用宽度（总宽度 - 系统任务栏等占用的宽度）。
availHeight	屏幕的可用高度（总高度 - 系统任务栏等占用的高度）。
colorDepth	屏幕的颜色深度（如 24 表示支持 24 位真彩色）。

// 获取屏幕分辨率
console.log(`屏幕分辨率：${screen.width}x${screen.height}`);

// 获取可用屏幕区域（实际可显示内容的区域）
console.log(`可用区域：${screen.availWidth}x${screen.availHeight}`);

screen 对象演示

显示屏幕信息

<script>     function showScreenInfo() {       const info = `         <p>屏幕分辨率: ${screen.width} × ${screen.height}</p>         <p>可用屏幕区域: ${screen.availWidth} × ${screen.availHeight}</p>         <p>颜色深度: ${screen.colorDepth} 位</p>       `;       document.getElementById('screenInfo').innerHTML = info;     }   </script> </div>

window.frames：访问框架页面的窗口对象

window.frames 是一个类数组对象，用于访问当前页面中所有 <frame> 或 <iframe> 标签对应的子窗口（window 对象）。每个框架（<frame>/<iframe>）都是一个独立的窗口环境，拥有自己的 document、location 等对象。

• 框架（Frame）：指 <frame> 或 <iframe> 标签，用于在当前页面中嵌入另一个 HTML 文档（子页面）。
• frames 与框架的对应关系：window.frames 的索引或名称与页面中框架的顺序或 name 属性一一对应。例如，第一个 <iframe> 对应 frames[0]，name="frame1" 的框架对应 frames['frame1']。

属性 / 访问方式	说明	示例
frames[index]	通过索引访问子框架（按页面中 <frame>/<iframe> 出现的顺序，从 0 开始）。	const firstFrame = window.frames[0];（获取第一个框架的窗口对象）
frames[name/id]	通过框架的 name 或 id 属性访问（更直观，推荐使用）。	<iframe name="userFrame" id="userFrame"> → frames['userFrame']
length	返回当前页面中框架的总数（<frame> 和 <iframe> 都算）。	console.log(frames.length);（输出框架数量，无框架则为 0）
self	指向当前窗口自身（若在主页面，self === window；若在子框架，self 是子窗口）。	frame.self.document（等价于 frame.document，访问子框架文档）
parent	指向当前窗口的直接父窗口（子框架中使用，主页面的 parent === self）。	子框架中：parent.document（访问主页面文档）
top	指向最顶层窗口（无论嵌套多少层框架，top 始终是主页面窗口）。	多层嵌套框架中：top.document（穿透所有层级，访问最外层主页面）

<!-- parent.html -->
<!DOCTYPE html>
<html>
<body>
  <h1>主页面</h1>
  <!-- 嵌入子页面，name 属性为 "childFrame" -->
  <iframe src="child.html" name="childFrame" id="childFrame"></iframe>

  <script>
    // 访问 frames 对象
    console.log(window.frames); // 类数组对象，包含所有框架的 window 对象

    // 方式1：通过索引访问（按页面中出现的顺序）
    const frameByIndex = window.frames[0]; 
    console.log(frameByIndex); // 第一个框架的 window 对象

    // 方式2：通过 name 或 id 访问（更直观）
    const frameByName = window.frames['childFrame']; 
    console.log(frameByName); // 名称为 "childFrame" 的框架的 window 对象

    // 访问子框架的 document（操作子页面内容）
    const childDoc = frameByName.document;
    console.log(childDoc.body.innerHTML); // 输出子页面 body 的内容
  </script>
</body>
</html>

弹窗相关方法（window 直接提供）

浏览器提供了几个原生弹窗方法，用于简单的交互（但样式固定，体验一般，实际开发中多自定义弹窗）。

方法	说明
alert(message)	显示警告弹窗（只有 “确定” 按钮）。
confirm(message)	显示确认弹窗（有 “确定” 和 “取消” 按钮，返回布尔值 true/false）。
prompt(message, default)	显示输入弹窗（可输入内容，返回输入的字符串或 null）。

// 警告弹窗
alert("这是一个警告！");

// 确认弹窗
const agree = confirm("你确定要删除吗？");
if (agree) {
  console.log("用户点击了确定");
} else {
  console.log("用户点击了取消");
}

// 输入弹窗
const name = prompt("请输入你的名字：", "张三"); // 第二个参数是默认值
if (name !== null) {
  console.log("用户输入：", name);
}

弹窗方法演示

显示警告弹窗 显示确认弹窗 显示输入弹窗

<script>     function showConfirm() {       const result = confirm('你确定要执行这个操作吗？');       document.getElementById('dialogResult').textContent = `确认结果: ${result ? '确定' : '取消'}`;     }      function showPrompt() {       const name = prompt('请输入你的名字:', '张三');       if (name !== null) {         document.getElementById('dialogResult').textContent = `你输入的名字是: ${name}`;       } else {         document.getElementById('dialogResult').textContent = '你取消了输入';       }     }   </script> </div>

window 其他常用属性与方法

功能	说明
窗口尺寸	innerWidth/innerHeight：浏览器窗口的内部宽度 / 高度（包含滚动条）。outerWidth/outerHeight：浏览器窗口的外部宽度 / 高度（包含边框）。
滚动控制	scrollTo(x, y)：滚动到页面指定坐标。scrollBy(x, y)：相对当前位置滚动指定距离。
定时器	setTimeout(fn, delay)：延迟 delay 毫秒后执行 fn（只执行一次）。setInterval(fn, interval)：每隔 interval 毫秒执行一次 fn（重复执行）。clearTimeout(timer)/clearInterval(timer)：清除定时器。

// 获取窗口内部宽度（可视区域宽度）
console.log("窗口宽度：", window.innerWidth);

// 滚动到页面顶部（x=0, y=0）
window.scrollTo(0, 0);

// 3秒后执行一次
const timer1 = setTimeout(() => {
  console.log("3秒后执行");
}, 3000);
clearTimeout(timer1); // 取消定时器

// 每隔1秒执行一次
const timer2 = setInterval(() => {
  console.log("每隔1秒执行");
}, 1000);
clearInterval(timer2); // 取消定时器

窗口控制演示

显示窗口尺寸 滚动到顶部 向下滚动100px

<script>     function showWindowSize() {       const info = `         <p>窗口内部宽度: ${window.innerWidth}px</p>         <p>窗口内部高度: ${window.innerHeight}px</p>       `;       document.getElementById('windowInfo').innerHTML = info;     }      function scrollToTop() {       window.scrollTo(0, 0);     }   </script> </div>

定时器演示

启动3秒后提示 启动计数器 停止计数器

<script>     let intervalId;      function startTimeout() {       document.getElementById('timerResult').textContent = '3秒后将显示提示...';       setTimeout(() => {         document.getElementById('timerResult').textContent = '3秒时间到！';       }, 3000);     }      function startInterval() {       let count = 0;       intervalId = setInterval(() => {         count++;         document.getElementById('timerResult').textContent = `计数器: ${count}秒`;       }, 1000);     }      function stopInterval() {       clearInterval(intervalId);       document.getElementById('timerResult').textContent = '计数器已停止';     }   </script> </div>

JS操作BOM对象

JS操作window.location

location 对象的属性对应 URL 的各个组成部分，所有属性都可读写（修改属性会触发页面跳转或 URL 变化）。

以 https://www.example.com:8080/path?name=test&id=1#top 为例

// 1. 获取 URL 各部分信息
console.log(location.href); // 完整 URL
console.log(location.protocol); // "https:"
console.log(location.search); // "?name=test&id=1"
console.log(location.hash); // "#top"

// 2. 修改属性触发页面变化
location.hash = "#bottom"; // URL 变为 ...#bottom（页面不刷新，仅滚动到锚点）
location.search = "?page=2"; // URL 变为 ...?page=2（页面会刷新）
location.href = "https://baidu.com"; // 直接跳转到百度（最常用的跳转方式）

location 提供了三个方法用于主动控制页面行为，与修改 href 不同，这些方法有更具体的场景用途。

方法名	说明	与 href 的区别
assign(url)	跳转到指定 URL，会在浏览器历史记录中添加新记录（支持 “后退” 返回原页面）	等价于 location.href = url，但语义更清晰（明确表示 “导航到新页面”）
replace(url)	跳转到指定 URL，替换当前历史记录（无法 “后退” 返回原页面）	适合不需要保留原页面历史的场景（如登录后跳转，避免后退回到登录页）
reload(force)	刷新当前页面，force 为布尔值（可选）	force=true：强制从服务器刷新（忽略缓存）；force=false（默认）：优先使用缓存

// 1. 普通跳转（可后退）
location.assign("https://taobao.com"); // 等价于 location.href = "..."

// 2. 替换跳转（不可后退）
// 场景：用户登录后从 login.html 跳转到 index.html，不希望后退回到登录页
location.replace("https://example.com/index.html");

// 3. 刷新页面
location.reload(); // 普通刷新（用缓存）
location.reload(true); // 强制刷新（适合内容实时性要求高的场景，如数据看板）

解析URL参数是最常用的，因为location.search 包含 URL 中的查询参数（如 ?name=test&id=1），需手动解析为对象才方便使用

function getUrlParams() {
  const params = {};
  const search = location.search.slice(1); // 去除开头的 "?"，得到 "name=test&id=1"
  if (search) {
    search.split("&").forEach(item => {
      const [key, value] = item.split("=");
      params[key] = decodeURIComponent(value); // 解码（处理中文等特殊字符）
    });
  }
  return params;
}

// 使用：假设 URL 为 ...?name=张三&age=20
const params = getUrlParams();
console.log(params.name); // "张三"
console.log(params.age); // "20"

强制使用 HTTPS 协议也是常用的，通过修改 protocol 实现 HTTP 到 HTTPS 的跳转：

if (location.protocol !== "https:") {
  location.protocol = "https:"; // 自动跳转到 HTTPS 版本（如 http://xxx → https://xxx）
}

当 URL 包含中文、空格等特殊字符时，需用 encodeURIComponent() 编码，避免解析错误

const name = "张三";
location.href = `search.html?name=${encodeURIComponent(name)}`; // 编码后：name=%E5%BC%A0%E4%B8%89

JS操作window.history

基础操作

操作的时候，history 对象仅有一个常用的属性，length，它返回当前会话中历史记录的总条数（包含当前页面，以及可前进 / 后退的页面）。

// 假设用户从 A 页 → B 页 → 当前页（C 页）
console.log(history.length); // 输出 3（A、B、C 三条记录）

其中，length 仅反映当前会话的历史记录数，无法获取具体的 URL 或内容

方法名	说明	示例（假设当前在历史记录的第 N 条）
back()	后退到上一条历史记录（等价于浏览器 “后退” 按钮）。	从 N → N-1 条记录
forward()	前进到下一条历史记录（等价于浏览器 “前进” 按钮）。	从 N → N+1 条记录（若存在）
go(n)	跳转到历史记录中相对于当前位置的第 n 条记录（n 为整数）。	go(-1) 等价于 back()，go(1) 等价于 forward()，go(0) 等价于刷新页面

// 后退一页（如从详情页回到列表页）
document.getElementById("backBtn").onclick = () => {
  history.back();
};

// 前进一页（如从列表页回到之前浏览的详情页）
document.getElementById("forwardBtn").onclick = () => {
  history.forward();
};

// 后退两页
history.go(-2);

// 前进三页（若历史记录不足则无效果）
history.go(3);

// 刷新当前页（等价于 location.reload()）
history.go(0);

无刷新路由

HTML5 为 history 新增了 pushState() 和 replaceState() 方法，允许开发者在不刷新页面的情况下修改浏览器地址栏 URL 并操作历史记录，这是单页应用（SPA）实现无刷新路由的核心技术。

1. history.pushState(state, title, url)

   • 功能：向历史记录中添加一条新记录，同时修改地址栏 URL，但不会触发页面刷新。

   • 参数说明：

     • state：一个与新记录关联的状态对象（可在 popstate 事件中获取），容量上限约 640KB。
     • title：新记录的标题（目前主流浏览器基本忽略此参数，通常传空字符串）。
     • url：新的 URL（必须与当前页面同源，否则会报错），可为相对路径或绝对路径。

2. history.replaceState(state, title, url)

   • 功能：替换当前历史记录（而非新增），其他行为与 pushState() 一致。

   • 适用场景：修改当前页面的 URL 但不希望增加历史记录（如更新页面参数后不保留原参数的历史）。

注意，他们存在同源限制，pushState() 和 replaceState() 的 url 参数必须与当前页面同源（协议、域名、端口一致），否则会抛出 SecurityError。

<!-- 单页应用中，点击导航切换内容，URL 同步变化但不刷新页面 -->
<nav>
  <a href="/home">首页</a>
  <a href="/about">关于</a>
  <a href="/contact">联系</a>
</nav>
<div id="content"></div>

<script>
  // 初始加载时渲染首页
  renderPage("/home");

  // 拦截导航点击事件
  document.querySelectorAll("nav a").forEach(link => {
    link.addEventListener("click", (e) => {
      e.preventDefault(); // 阻止默认跳转（避免页面刷新）
      const url = link.getAttribute("href");
      
      // 向历史记录添加新条目，并修改 URL
      history.pushState({ path: url }, "", url);
      
      // 渲染对应页面内容
      renderPage(url);
    });
  });

  // 渲染页面内容的函数
  function renderPage(path) {
    const content = document.getElementById("content");
    switch(path) {
      case "/home":
        content.innerHTML = "<h1>首页内容</h1>";
        break;
      case "/about":
        content.innerHTML = "<h1>关于我们</h1>";
        break;
      case "/contact":
        content.innerHTML = "<h1>联系我们</h1>";
        break;
      default:
        content.innerHTML = "<h1>404 页面</h1>";
    }
  }
</script>

popstate 事件（监听历史记录变化）

当用户通过 back()、forward()、go() 方法或浏览器的前进 / 后退按钮切换历史记录时，会触发名为 popstate 的事件。

• 注意：pushState() 和 replaceState() 方法不会触发 popstate 事件，只有用户主动切换历史记录时才会触发。

// 监听历史记录变化
window.addEventListener("popstate", (e) => {
  // e.state 是 pushState/replaceState 时传入的 state 对象
  const path = e.state?.path || window.location.pathname;
  renderPage(path); // 同步渲染对应页面
});

结合前面的示例，当用户点击浏览器 “后退” 按钮时，popstate 事件会触发，页面内容会自动切换到上一个历史记录对应的页面，实现与 URL 同步的无刷新导航。

JS操作 window.screen

screen 对象的属性均为只读属性，用于获取屏幕的各种物理或可用信息

所以说。。。。。怎么操作

但是获取他们并自己做出决定就足矣，这是移动端适配的核心

screen.orientation 是一个专门用于获取和控制屏幕方向的对象（部分移动浏览器支持方向锁定），其核心属性和方法如下：

属性 / 方法	说明
type	屏幕方向类型，常见值：landscape-primary（主横屏）、landscape-secondary（副横屏，倒转）、portrait-primary（主竖屏）、portrait-secondary（副竖屏，倒转）。
angle	屏幕旋转角度（0°、90°、180°、270°），与 type 对应（如横屏通常为 0° 或 180°）。
lockOrientation(方向)	锁定屏幕方向（仅部分移动浏览器支持，如 Chrome 移动版），参数为方向类型（如 "landscape" 锁定横屏）。
unlockOrientation()	解除屏幕方向锁定。

那么假如我们需要监听屏幕方向变化，就可以这么写

// 监听屏幕方向变化事件
screen.orientation.addEventListener("change", () => {
  console.log("当前方向：", screen.orientation.type);
  console.log("旋转角度：", screen.orientation.angle);
});

// 尝试锁定屏幕为横屏（移动设备生效）
try {
  screen.orientation.lock("landscape").then(() => {
    console.log("已锁定为横屏");
  }).catch(err => {
    console.log("锁定失败：", err); // 可能因浏览器限制或权限失败
  });
} catch (e) {
  console.log("浏览器不支持方向锁定");
}

通过屏幕信息判断当前窗口是否全屏，也是最常用的了，配合 requestFullscreen() 实现全屏功能：

// 全屏按钮点击事件
document.getElementById("fullscreenBtn").addEventListener("click", () => {
  // 判断是否已全屏
  const isFullscreen = document.fullscreenElement;
  
  if (isFullscreen) {
    // 退出全屏
    document.exitFullscreen();
  } else {
    // 进入全屏（请求当前文档全屏）
    document.documentElement.requestFullscreen().catch(err => {
      console.log("全屏失败：", err); // 可能因浏览器限制失败
    });
  }
});

// 监听全屏状态变化，对比屏幕尺寸
document.addEventListener("fullscreenchange", () => {
  if (document.fullscreenElement) {
    console.log("已进入全屏，当前窗口尺寸：", window.innerWidth + "×" + window.innerHeight);
    console.log("屏幕总尺寸：", screen.width + "×" + screen.height);
  } else {
    console.log("已退出全屏");
  }
});

根据屏幕可用区域，让弹窗居中显示（避免超出屏幕范围）

function showCenterDialog() {
  const dialog = document.getElementById("dialog");
  const dialogWidth = 400; // 弹窗宽度
  const dialogHeight = 300; // 弹窗高度
  
  // 计算居中位置（基于可用屏幕区域）
  const left = (screen.availWidth - dialogWidth) / 2;
  const top = (screen.availHeight - dialogHeight) / 2;
  
  // 设置弹窗样式
  dialog.style.cssText = `
    position: fixed;
    left: ${left}px;
    top: ${top}px;
    width: ${dialogWidth}px;
    height: ${dialogHeight}px;
  `;
  dialog.style.display = "block";
}

这三个都是巨有用的东西