如何使用JavaScript检测页面运行环境，在浏览器中隐藏指定按钮？

先给按钮加个ID，方便后续用JS操控它的显示状态：

<button id="browserViewBtn" type="button" title="view full size in browser" onclick="NewTab()">
view in browser
</button>

<script>
function NewTab() {
    window.open("https://mypage.aspx", "_blank");
}

// 检测是否在Microsoft Teams嵌入环境里
function isInTeams() {
    const userAgent = window.navigator.userAgent.toLowerCase();
    return userAgent.includes("teams");
}

// 页面加载完再处理按钮显示
window.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('browserViewBtn');
    // 浏览器环境下隐藏，Teams里才显示
    btn.style.display = isInTeams() ? 'block' : 'none';
});
</script>

逻辑说明 #

• 环境识别：Teams的嵌入式WebView会在navigator.userAgent里带上"teams"标识，直接判断这个就能区分是否在Teams环境中。
• 显示控制：页面加载完成后，根据检测结果切换按钮的display样式——正常浏览器里隐藏按钮，Teams嵌入场景下才让用户看到。

适配更多嵌入场景的通用方案 #

如果你的页面还可能嵌入到iframe、其他WebView等容器中，可以用下面的方法判断是否处于嵌入环境：

function isEmbedded() {
    try {
        // 判断当前页面是否被嵌套在别的框架里
        return window.top !== window.self;
    } catch (e) {
        // 跨域时无法访问window.top，这种情况默认视为嵌入环境
        return true;
    }
}

// 调整控制逻辑：只要是嵌入环境就显示按钮，独立浏览器就隐藏
window.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('browserViewBtn');
    btn.style.display = isEmbedded() ? 'block' : 'none';
});

这个方案能覆盖更多非独立浏览器的场景，比如iframe嵌入、各类第三方WebView容器等。

内容的提问来源于stack exchange，提问作者David.P