跨页面点击按钮触发进度条推进的实现方案咨询

下面是几种实用的原生实现方案，无需额外插件：

方法1：利用 LocalStorage/SessionStorage 实现 #

通过浏览器本地存储记录进度值，目标页面监听存储变化事件来同步更新进度条。

按钮页面（page1.html）代码： #

// 初始化进度值（首次加载时设置）
if (!localStorage.getItem('progressValue')) {
  localStorage.setItem('progressValue', '0');
}

// 绑定按钮点击事件
document.getElementById('increaseBtn').addEventListener('click', () => {
  let currentProgress = parseInt(localStorage.getItem('progressValue'));
  if (currentProgress < 100) {
    currentProgress += 10; // 每次增加10%，可自定义步长
    localStorage.setItem('progressValue', currentProgress.toString());
  }
});

进度条页面（page2.html）代码： #

const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');

// 初始化进度条状态
let initialProgress = parseInt(localStorage.getItem('progressValue') || '0');
progressBar.style.width = `${initialProgress}%`;
progressText.textContent = `${initialProgress}%`;

// 监听LocalStorage变化，同步更新
window.addEventListener('storage', (e) => {
  if (e.key === 'progressValue') {
    progressBar.style.width = `${e.newValue}%`;
    progressText.textContent = `${e.newValue}%`;
  }
});

注：SessionStorage用法完全一致，区别是SessionStorage在浏览器关闭后会清空，LocalStorage会持久保存，根据需求选择。

方法2：使用 Broadcast Channel API 实现实时广播 #

创建专属广播频道，按钮页面发送进度更新消息，进度条页面监听频道接收消息并更新，实时性更强。

按钮页面（page1.html）代码： #

// 创建广播频道
const progressChannel = new BroadcastChannel('progress_updates');

document.getElementById('increaseBtn').addEventListener('click', () => {
  let currentProgress = parseInt(localStorage.getItem('progressValue') || '0');
  if (currentProgress < 100) {
    currentProgress += 10;
    localStorage.setItem('progressValue', currentProgress.toString());
    // 发送进度更新广播
    progressChannel.postMessage({ progress: currentProgress });
  }
});

进度条页面（page2.html）代码： #

const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');

// 初始化进度
let initialProgress = parseInt(localStorage.getItem('progressValue') || '0');
progressBar.style.width = `${initialProgress}%`;
progressText.textContent = `${initialProgress}%`;

// 监听广播频道
const progressChannel = new BroadcastChannel('progress_updates');
progressChannel.onmessage = (e) => {
  const newProgress = e.data.progress;
  progressBar.style.width = `${newProgress}%`;
  progressText.textContent = `${newProgress}%`;
};

方法3：SharedWorker 实现复杂状态同步（进阶） #

适合多页面需要同步复杂状态的场景，通过共享Worker中转所有页面的状态更新。

共享Worker文件（shared-worker.js）： #

let connections = [];
let currentProgress = 0;

// 处理页面连接
self.onconnect = (e) => {
  const port = e.ports[0];
  connections.push(port);

  // 向新连接页面发送当前进度
  port.postMessage({ progress: currentProgress });

  // 接收页面发送的进度更新
  port.onmessage = (msg) => {
    if (msg.data.type === 'update') {
      currentProgress = Math.min(msg.data.value, 100);
      // 通知所有连接的页面
      connections.forEach(conn => conn.postMessage({ progress: currentProgress }));
    }
  };

  // 移除断开的连接
  port.onclose = () => {
    connections = connections.filter(conn => conn !== port);
  };
};

按钮页面（page1.html）代码： #

const worker = new SharedWorker('shared-worker.js');

document.getElementById('increaseBtn').addEventListener('click', () => {
  // 发送进度更新请求
  worker.port.postMessage({ type: 'update', value: currentProgress + 10 });
});

进度条页面（page2.html）代码： #

const progressBar = document.getElementById('progressBar');
const progressText = document.getElementById('progressText');
const worker = new SharedWorker('shared-worker.js');

// 接收Worker发送的进度更新
worker.port.onmessage = (e) => {
  const newProgress = e.data.progress;
  progressBar.style.width = `${newProgress}%`;
  progressText.textContent = `${newProgress}%`;
};

// 启动通信
worker.port.start();

内容的提问来源于stack exchange，提问作者Diadh