如何在jQuery中检测自定义协议是否被用户系统支持？

嘿，我完全懂你的烦恼——想提前判断用户系统能不能识别customprotocol://这类自定义协议，这样就能在不支持的时候友好引导安装软件，而不是直接弹出无效链接的错误提示对吧？之前试了window.onblur和iframe的方法没成功确实让人挠头，毕竟2010年的老方案早就跟不上现在浏览器的安全规则了。

其实目前浏览器并没有提供直接检测自定义协议的原生API，但我们可以利用页面焦点变化+定时器的思路来间接判断，这也是目前相对靠谱的方案。核心逻辑是：如果系统支持该协议，点击链接后浏览器会唤起外部应用，当前页面会失去焦点；如果不支持，浏览器会弹出错误提示，页面焦点不会变化，这时定时器就会触发 fallback 逻辑。

给你写个jQuery版本的实现代码：

function checkCustomProtocolSupport(protocol, fallbackCallback) {
    var timeoutTimer;
    var protocolSupported = false;

    // 创建一个隐藏的临时链接
    var triggerLink = $('<a>')
        .attr('href', `${protocol}://protocol-test`)
        .hide()
        .appendTo('body');

    // 监听页面失焦事件：如果失焦，说明协议被唤起，标记为支持
    $(window).on('blur', function() {
        protocolSupported = true;
        clearTimeout(timeoutTimer);
        // 清理事件和元素
        $(window).off('blur');
        triggerLink.remove();
        // 唤起目标协议操作
        window.location.href = `${protocol}://do_this`;
    });

    // 设置超时判断：如果1秒内没失焦，说明协议不支持
    timeoutTimer = setTimeout(function() {
        $(window).off('blur');
        triggerLink.remove();
        if (!protocolSupported) {
            fallbackCallback();
        }
    }, 1000); // 超时时间可根据浏览器行为调整，比如改成1500ms

    // 触发链接点击
    triggerLink[0].click();
}

// 调用示例
checkCustomProtocolSupport('customprotocol', function() {
    alert('请先安装我们的软件，才能使用此功能哦！');
});

一些注意事项要提醒你： #

• 不同浏览器的行为可能有差异：比如部分版本的Firefox唤起外部应用时不会立即让页面失焦，你可能需要适当延长超时时间；有些浏览器会记住用户的选择（比如“始终允许唤起”），这时候检测逻辑会更准确。
• 这个方法不是100%完美：如果用户在超时时间内手动切换了窗口，会误判为协议支持，但这种情况概率很低，属于可接受的误差。
• 为什么iframe方法不行？因为浏览器的安全策略会阻止iframe加载自定义协议时触发error事件，所以没法通过iframe的错误回调来判断支持性，这也是你之前尝试失败的原因。

希望这个方案能帮到你！

备注：内容来源于stack exchange，提问作者Jana Jerinic