如何实现点击按钮跳转页面后自动执行JS价格列表过滤函数？

我想要制作一个按钮，点击后跳转到pricelist.html页面，待新页面加载完成后运行名为facePrizes的价格列表过滤函数。以下是我当前编写的代码示例，请问该如何用JavaScript正确实现这一需求？

var faceButton = document.getElementById('faceButton');

faceButton.addEventListener('click', function () {
            window.location.href = '/pricelist.html';
            window.onload = function () {
                facePrizes();
            }
        });

function facePrizes(){
   document.getElementById('nose').style.display = 'block';
   document.getElementById('eyes').style.display = 'block';
   document.getElementById('arm').style.display = 'none';
   document.getElementById('leg').style.display = 'none';
}

你当前的写法无法生效，原因是：当通过window.location.href跳转到新页面后，原页面的JavaScript执行环境会被销毁，你绑定的window.onload事件根本不会在新页面触发——新页面的window对象和原页面完全是两个独立的环境。

下面提供两种常用的可行方案：

方案一：通过URL参数传递触发标识 #

1. 修改原页面的按钮点击逻辑 #

跳转时在URL末尾添加参数，用来告诉新页面需要执行哪个过滤函数：

var faceButton = document.getElementById('faceButton');

faceButton.addEventListener('click', function () {
    // 添加?filter=face参数
    window.location.href = '/pricelist.html?filter=face';
});

2. 在pricelist.html中添加执行逻辑 #

在pricelist.html的脚本里，页面加载完成后读取URL参数，判断后执行对应函数：

// 定义facePrizes函数（要确保这个函数在pricelist.html中存在）
function facePrizes(){
   document.getElementById('nose').style.display = 'block';
   document.getElementById('eyes').style.display = 'block';
   document.getElementById('arm').style.display = 'none';
   document.getElementById('leg').style.display = 'none';
}

// 页面加载完成后检查URL参数
window.addEventListener('load', function() {
    // 获取URL参数
    const params = new URLSearchParams(window.location.search);
    const filterType = params.get('filter');
    
    // 如果参数是face，执行对应函数
    if (filterType === 'face') {
        facePrizes();
    }
});

方案二：通过本地存储（localStorage）传递状态 #

1. 修改原页面的按钮点击逻辑 #

点击按钮时，将需要执行的函数标识存入localStorage，再跳转页面：

var faceButton = document.getElementById('faceButton');

faceButton.addEventListener('click', function () {
    // 存储需要执行的过滤类型
    localStorage.setItem('filterType', 'face');
    window.location.href = '/pricelist.html';
});

2. 在pricelist.html中添加执行逻辑 #

页面加载完成后读取localStorage中的标识，执行对应函数，执行完成后建议清除该标识（避免页面刷新时重复执行）：

function facePrizes(){
   document.getElementById('nose').style.display = 'block';
   document.getElementById('eyes').style.display = 'block';
   document.getElementById('arm').style.display = 'none';
   document.getElementById('leg').style.display = 'none';
}

window.addEventListener('load', function() {
    const filterType = localStorage.getItem('filterType');
    
    if (filterType === 'face') {
        facePrizes();
        // 执行完成后清除存储，防止刷新页面重复触发
        localStorage.removeItem('filterType');
    }
});

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