如何让script.js中的宽度判断重定向逻辑仅作用于指定HTML页面

原有代码错误点 #

• 语法不符合规范：对象字面量内部不能直接编写全局事件绑定语句、独立函数声明
• 事件绑定逻辑错误：window.onload = redirectMobileHandler() 是直接执行函数并将返回值赋值给onload事件，不会在页面加载完成后触发回调
• 缺少页面过滤逻辑：没有判断当前页面身份，会导致所有引入该JS的页面都触发重定向，容易出现mobile页面循环跳转的问题
• 命名冲突风险：原有自定义对象使用name作为变量名，属于浏览器window对象的内置属性，容易出现全局命名冲突

修正后的完整script.js代码 #

// 原有封装按钮事件的对象，将变量名从name改为自定义的siteFunc避免冲突
var siteFunc = {
    first: function() {
        // 原有按钮点击触发逻辑保留
    },
    second: function() {
        // 原有按钮点击触发逻辑保留
    }
};

// 重定向逻辑单独抽离到对象外部，自动执行
function redirectMobileHandler() {
    // 仅在desktop.html页面触发逻辑，避免其他页面误跳转
    if (window.location.pathname.includes('desktop.html')) {
        const width = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
        // 新增跳转前校验，避免已经跳转后反复触发重定向
        if (width < 992 && !window.location.href.includes('mobile.html')) {
            window.location.href = 'mobile.html';
        }
    }
}

// 页面加载完成后触发重定向校验
window.onload = redirectMobileHandler;
// 窗口尺寸变化时触发重定向校验，不需要动态跳转可删除该行
window.onresize = redirectMobileHandler;

使用说明 #

• 在desktop.html中正常引入修改后的script.js即可，不需要额外添加内联脚本
• 如果不需要在用户拖动窗口改变尺寸时动态触发跳转，直接删除window.onresize对应的绑定语句即可
• mobile.html如果不需要用到原有封装的按钮函数，可以不引入该JS文件，减少不必要的逻辑执行

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