如何在React Native WebView中隐藏来源网页的指定元素

实现原理 #

React Native 的 WebView 组件支持向加载的网页中注入自定义 JavaScript 代码，代码可在页面加载完成后执行，通过标准 DOM 操作即可实现元素隐藏、控件禁用等效果，不受源站技术栈限制，AngularJS 开发的应用最终渲染的也是标准 DOM 结构，完全兼容该方案。

具体操作步骤 #

• 首先在 PC 端浏览器打开目标 Web 应用，按 F12 调出开发者工具，使用元素选择器定位到需要隐藏/禁用的元素，复制其 CSS 选择器（支持 ID、类名、属性选择器，AngularJS 自带的 ng- 前缀的类或属性也可正常用于定位）。
• 在 RN 项目中引入 react-native-webview 组件，通过 injectedJavaScript 属性配置要注入的 JS 代码即可，示例代码如下：

import WebView from 'react-native-webview';

// 自定义注入的JS逻辑
const injectedJavaScript = `
  // 隐藏目标元素
  const hideTarget = document.querySelector('你复制的待隐藏元素选择器');
  if (hideTarget) hideTarget.style.display = 'none';

  // 禁用目标开关控件
  const disableSwitch = document.querySelector('你复制的待禁用开关选择器');
  if (disableSwitch) {
    disableSwitch.disabled = true;
    // 额外阻止点击事件冒泡，避免AngularJS绑定的事件仍然触发
    disableSwitch.addEventListener('click', e => e.preventDefault(), true);
  }
  true; // *必须保留该行，避免部分版本WebView出现执行警告*
`;

const BusinessWebView = () => {
  return (
    <WebView
      source={{ uri: '你的电表更换业务Web应用地址' }}
      injectedJavaScript={injectedJavaScript}
      javaScriptEnabled={true}
    />
  );
};

export default BusinessWebView;

AngularJS 应用兼容优化 #

AngularJS 是数据驱动渲染，部分元素可能是接口请求完成后异步渲染、或者数据更新后重新渲染的，仅注入一次 JS 可能出现操作失效的问题，可通过 DOM 变动监听解决，调整注入的 JS 代码如下：

const observer = new MutationObserver(() => {
  // 重复执行隐藏、禁用逻辑，确保动态渲染的元素也能被处理
  const hideTarget = document.querySelector('你复制的待隐藏元素选择器');
  if (hideTarget && hideTarget.style.display !== 'none') {
    hideTarget.style.display = 'none';
  }

  const disableSwitch = document.querySelector('你复制的待禁用开关选择器');
  if (disableSwitch && !disableSwitch.disabled) {
    disableSwitch.disabled = true;
    disableSwitch.addEventListener('click', e => e.preventDefault(), true);
  }
});
// 监听整个页面的DOM变动
observer.observe(document.body, { childList: true, subtree: true });
true;

注意事项 #

• 操作前请确认你拥有该业务 Web 应用的移动端适配修改权限，符合公司业务规范要求
• 如果后续源站 Web 应用迭代更新了页面结构、元素类名/ID，需要同步更新 RN 端的注入代码逻辑

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