JavaScript实现非浏览器环境下隐藏页脚等指定div元素

核心判断逻辑 #

要区分普通独立浏览器和React Native WebView这类APP内嵌Web环境，不要用「是否移动端」这类粗粒度判断规则，优先用两类高准确率的判断特征：

• 检测RN WebView默认注入的全局对象：未做特殊修改的RN WebView环境下，window对象上会挂载ReactNativeWebView属性，独立浏览器环境下不存在这个属性
• 匹配UA专属标识：可以和移动端开发约定，APP内嵌WebView加载页面时在User-Agent里追加专属自定义字段，通过匹配字段识别环境，兼容性最好

完整实现代码 #

1. 环境判断函数+环境标识注入 #

// 识别是否处于APP内嵌WebView非独立浏览器环境
function isInAppWebView() {
  // 优先判断RN WebView专属全局变量，无自定义配置时准确率100%
  if (typeof window.ReactNativeWebView !== 'undefined') return true;
  // UA匹配规则，可根据和客户端约定的专属标识扩展
  const userAgent = navigator.userAgent.toLowerCase();
  const webviewMarks = ['reactnative', 'app_webview', 'your_app_custom_webview_mark'];
  return webviewMarks.some(mark => userAgent.includes(mark));
}

// DOM加载完成后注入环境标识
document.addEventListener('DOMContentLoaded', () => {
  if (isInAppWebView()) {
    // 给根节点添加类名，配合CSS统一控制需要隐藏的元素，适配动态渲染场景
    document.documentElement.classList.add('is-in-webview');
  }
});

2. 配套CSS控制页脚隐藏 #

比直接操作DOM隐藏元素更稳定，不会因为页面动态重渲染导致隐藏失效：

/* 内嵌WebView环境下隐藏所有页脚类元素 */
.is-in-webview footer,
.is-in-webview .footer,
.is-in-webview .page-footer {
  display: none !important;
}

单页应用适配说明 #

如果是React、Vue这类单页应用，不需要手动操作DOM：

• 在应用入口文件最顶部执行isInAppWebView()判断，将结果存入全局状态
• 在公共布局组件中，根据判断结果直接不渲染footer组件即可，性能更优

注意：不要单独使用「屏幕尺寸」「是否移动端UA」作为判断依据，否则会导致手机端普通浏览器访问时页脚被错误隐藏。

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