如何实现iOS端从Facebook/Instagram内置浏览器跳转至默认浏览器

你的核心问题是iOS端Facebook/Instagram内置浏览器无法触发跳转至默认浏览器，原因主要有三点：

• iOS的WebView（包括FB/IG内置的）对自定义协议（如googlechrome://）支持有限，且会拦截非用户触发的跳转行为
• 直接设置window.location.href属于自动执行脚本，iOS的安全策略会阻止这类操作
• 你尝试的http://降级方案同样因为自动执行的原因被拦截

修改代码，结合用户交互触发+iOS兼容的跳转逻辑，以下是调整后的代码：

(function() {
    function isFacebookOrInstagramApp() {
        const ua = navigator.userAgent || navigator.vendor || window.opera;
        return ua.includes("FBAN") || ua.includes("FBAV") || ua.includes("Instagram");
    }

    function showJumpPrompt() {
        // 创建提示弹窗，让用户主动触发跳转
        const promptDiv = document.createElement('div');
        promptDiv.style.cssText = `
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
            z-index: 9999;
            text-align: center;
        `;
        promptDiv.innerHTML = `
            <p>请点击下方按钮在默认浏览器打开</p>
            <button id="jumpBtn" style="margin-top:10px;padding:8px 16px;background:#1877f2;color:white;border:none;border-radius:4px;cursor:pointer;">打开浏览器</button>
        `;
        document.body.appendChild(promptDiv);

        // 绑定跳转事件
        document.getElementById('jumpBtn').addEventListener('click', function() {
            const url = window.location.href;
            if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
                // iOS 兼容方案：创建a标签模拟点击，尝试唤起默认浏览器
                const a = document.createElement('a');
                a.href = url;
                a.target = '_blank';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);

                // 备用方案：如果跳转被拦截，提示用户手动复制链接
                setTimeout(() => {
                    if (document.visibilityState === 'visible') {
                        alert('跳转失败，请复制当前链接到浏览器打开');
                    }
                }, 1000);
            } else if (/Android/i.test(navigator.userAgent)) {
                // 保留原Android的intent逻辑
                const androidUrl = 'intent://' + url.replace(/^https?:\/\//, '') + '#Intent;scheme=http;package=com.android.chrome;end';
                window.location.href = androidUrl;
            } else {
                window.location.href = url;
            }
            document.body.removeChild(promptDiv);
        });
    }

    if (isFacebookOrInstagramApp()) {
        // 等待页面加载完成后再执行DOM操作
        if (document.readyState === 'complete') {
            showJumpPrompt();
        } else {
            window.addEventListener('load', showJumpPrompt);
        }
    }
})();

• 强制用户交互：iOS的WebView不允许无用户触发的自动跳转，通过弹窗让用户主动点击按钮触发跳转，绕过安全限制
• iOS跳转逻辑：创建<a>标签模拟用户点击，使用_blank目标尝试唤起默认浏览器，同时添加超时检测，若跳转失败则提示用户手动复制链接
• 页面加载时机：确保在页面完全加载后再创建弹窗，避免DOM操作报错

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