如何用JavaScript检测用户是否通过Telegram网页版访问我的网站/应用

核心检测逻辑 #

Telegram的内置浏览器（含移动端、桌面端客户端及网页版跳转环境）会留下两个可识别特征：

• 全局window对象中存在专属的TelegramWebviewProxy对象
• 用户代理（User Agent）字符串包含Telegram关键词

实现代码 #

1. 环境检测函数

function isTelegramWebEnvironment() {
    // 优先检测专属代理对象，准确率更高
    if (typeof window.TelegramWebviewProxy !== 'undefined') {
        return true;
    }
    // 备用检测用户代理字符串
    const userAgent = navigator.userAgent.toLowerCase();
    return userAgent.includes('telegram');
}

2. 检测后展示自定义信息

页面加载完成后执行检测，匹配成功则插入提示元素：

document.addEventListener('DOMContentLoaded', () => {
    if (isTelegramWebEnvironment()) {
        // 创建提示元素
        const tipElement = document.createElement('div');
        // 样式可根据需求自定义调整
        tipElement.style.cssText = `
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%);
            background: #2CA5E0;
            color: #fff;
            padding: 14px 28px;
            border-radius: 10px;
            z-index: 9999;
            font-size: 16px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        `;
        tipElement.textContent = '你正在通过Telegram访问本站，享受专属服务！';
        document.body.appendChild(tipElement);

        // 可选：5秒后自动隐藏提示
        setTimeout(() => {
            tipElement.style.transition = 'opacity 0.5s';
            tipElement.style.opacity = '0';
            setTimeout(() => tipElement.remove(), 500);
        }, 5000);
    }
});

注意事项 #

• TelegramWebviewProxy是Telegram内置环境的专属标识，准确率远高于用户代理检测，优先使用
• 用户代理字符串可能被手动修改，仅作为备用检测方案
• 若用户通过网页版Telegram（web.telegram.org）在浏览器新标签页打开网站，此时属于普通浏览器环境，无法通过上述方法检测

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