Electron中点击按钮跳转页面本地正常但应用内失效如何解决

首先定位语法错误 #

你当前的跳转路径存在多余空格，observer.html ?ip= 中html后缀后多了一个空格，本地localhost环境下浏览器会自动修正该类路径错误，但Electron下本地文件走file://协议，解析规则更严格，会直接把空格识别为路径的一部分，导致找不到对应文件。

其次排查Electron特有配置问题 #

• 若你使用Electron 14及以上版本，默认开启contextIsolation上下文隔离，部分场景下直接修改window.location.href会受安全策略限制触发异常
• 若主进程创建窗口时配置了错误的webPreferences参数，也会拦截本地页面的跳转逻辑

修复步骤 #

1. 修正跳转路径语法，同时对参数做编码处理避免特殊字符解析异常，修改js逻辑为：

$(document).ready(() => {
    $( '#buttonConnect').on('click',() =>{
        const inputIp = $('#ip');
        if(inputIp.val().trim() !== ""){
            // 移除路径空格，对参数编码
            window.location.href = "observer.html?ip="+encodeURIComponent(inputIp.val().trim());
            // 也可以替换为更稳妥的assign方法
            // location.assign(`observer.html?ip=${encodeURIComponent(inputIp.val().trim())}`)
        }else{
            alert("Check Connection Settings!");
        }
    });
});

2. 检查主进程窗口创建的配置，参考如下正确配置：

const { BrowserWindow } = require('electron')
const mainWindow = new BrowserWindow({
  width: 1200,
  height: 800,
  webPreferences: {
    // 不需要额外关闭安全配置，保持默认即可
    nodeIntegration: false,
    contextIsolation: true,
  }
})

3. 若打包后仍失效，检查打包配置（如electron-builder的files配置），确保observer.html被正确打包到资源目录，和当前页面的相对路径和开发环境一致。

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