桌面应用多页面按钮跳转失效，求连锁跳转解决方案

我帮你分析下问题所在，其实是两个小细节导致的：

核心问题1：JavaScript语法错误 #

你在buttons.js里给window.location.href赋值时错误地加了src=前缀，这是无效的语法，会导致按钮点击时直接抛出错误，自然无法跳转。比如你写的：

window.location.href = src="./home.html"; // 错误写法

正确的写法应该直接赋值路径字符串：

window.location.href = "./home.html"; // 正确写法

核心问题2：元素不存在导致脚本中断 #

每个页面加载buttons.js时，都会尝试获取所有页面的按钮元素，但当前页面没有的元素会返回null，给null.onclick赋值会抛出TypeError，直接中断后续代码执行。比如在Home页面加载时，document.getElementById("IHY")返回null，这行代码报错后，后面的friendButton事件绑定代码根本不会运行。

解决方案 #

方案一：逐个检查元素存在性后绑定事件 #

对每个按钮先判断是否存在，再绑定点击逻辑，避免报错中断脚本：

// 主页面按钮
const ihyBtn = document.getElementById("IHY");
if (ihyBtn) {
    ihyBtn.onclick = function () {
        window.location.href = "./home.html";
    };
}

// Home页面按钮
const friendBtn = document.getElementById("friendButton");
if (friendBtn) {
    friendBtn.onclick = function () {
        window.location.href = "./friends.html";
    };
}

const settingsBtn = document.getElementById("settingsButton");
if (settingsBtn) {
    settingsBtn.onclick = function () {
        // 这里可以补充Settings页面的跳转逻辑
        // window.location.href = "./settings.html";
    };
}

// Friends页面按钮
const homeBtn = document.getElementById("homeButton");
if (homeBtn) {
    homeBtn.onclick = () => {
        window.location.href = "./home.html";
    };
}

方案二：使用事件委托（更推荐） #

把点击事件统一绑定到页面的body元素，通过判断点击目标的id来执行对应跳转。这种方法不需要逐个检查元素，代码更简洁健壮：

document.body.addEventListener('click', function(e) {
    switch(e.target.id) {
        case 'IHY':
            window.location.href = "./home.html";
            break;
        case 'friendButton':
            window.location.href = "./friends.html";
            break;
        case 'homeButton':
            window.location.href = "./home.html";
            break;
        case 'settingsButton':
            // 补充Settings页面的跳转逻辑
            // window.location.href = "./settings.html";
            break;
    }
});

修改完buttons.js后，重启你的Electron应用（桌面应用需要重新加载资源），就能实现正常的连锁页面跳转了。

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