移动端检测系统后跳转页面触发弹窗拦截，求解决方案

问题原因 #

浏览器的弹窗/跳转拦截机制会阻止无用户主动交互触发的页面跳转（比如页面加载时自动执行的location.replace或window.open），这类操作会被判定为可疑骚扰行为，因此弹出授权提示。你的代码放在文档头部，页面加载时立即执行跳转，正好触发了这个机制。

解决方案 #

1. 改为用户主动触发跳转 #

最可靠的方法是先给移动端用户显示引导按钮，让用户主动点击后再执行跳转，示例代码如下：

function getOS() {
    var userAgent = window.navigator.userAgent,
    platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
    macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K','iPad'],
    windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
    iosPlatforms = ['iPhone', 'iPod'],
    isMobile = false;
    
    if (iosPlatforms.indexOf(platform) !== -1) {
        isMobile = true;
    } else if (/Android/.test(userAgent)) {
        isMobile = true;
    }
    // 补充：iPad默认标识为桌面平台，需额外判断Mobile字段
    else if (macosPlatforms.indexOf(platform) !== -1 && /Mobile/.test(userAgent)) {
        isMobile = true;
    }
    return isMobile;
}

window.addEventListener('DOMContentLoaded', function() {
    const isMobile = getOS();
    if (isMobile) {
        // 创建引导按钮
        const mobileBtn = document.createElement('button');
        mobileBtn.textContent = '前往移动端站点';
        mobileBtn.style.cssText = 'padding:12px 24px; font-size:16px; margin:20px auto; display:block;';
        mobileBtn.addEventListener('click', function() {
            location.replace('mobile.html');
        });
        document.body.appendChild(mobileBtn);
    }
});

2. 优化检测逻辑（可选） #

• iPad的UA现在默认会标识为桌面平台，若需要将iPad纳入移动端检测，可补充判断userAgent中是否包含Mobile字段
• 避免在页面未完全加载时执行操作，改用DOMContentLoaded或load事件触发检测

为什么之前的方法无效 #

• location.replace和window.open在无用户交互的场景下都会被拦截，区别只是前者跳转当前页、后者打开新窗口，但都属于浏览器拦截范畴
• 页面加载时的自动执行代码不属于用户主动触发的交互，必然触发拦截机制

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