如何在React Native Webview中隐藏内嵌iframe的顶部菜单按钮

方案：注入自定义CSS/JS隐藏目标元素 #

由于DocumentCloud官方未提供关闭顶部菜单的URL参数，我们可以通过在Webview中注入样式或脚本，直接隐藏对应界面元素。

步骤1：确认菜单按钮的CSS选择器 #

先在浏览器中打开你的DocumentCloud文档页面（如https://www.documentcloud.org/documents/282753-lefler-thesis），右键点击顶部菜单按钮，选择「检查」，找到该元素的类名（当前版本中菜单按钮的类为.document-header__menu-button，顶部栏整体类为.document-header）。

步骤2：修改htmlRender方法注入样式 #

直接在包裹iframe的HTML中添加自定义样式，强制隐藏目标元素：

const htmlRender = (iframe) => `
  <html>
    <head>
      <style>
        /* 隐藏菜单按钮 */
        .document-header__menu-button {
          display: none !important;
        }
        /* 可选：隐藏整个顶部栏 */
        /* .document-header { display: none !important; } */
      </style>
    </head>
    <body style="margin: 0; padding: 0;">
      ${iframe}
    </body>
  </html>
`;

步骤3：备选方案：通过Webview注入脚本 #

如果样式注入不生效，可使用injectJavaScript属性，在iframe加载完成后执行脚本隐藏元素：

<WebView
  scrollEnabled={false}
  onMessage={callback}
  style={styles.container}
  containerStyle={styles.viewContainer}
  source={{
    html: htmlRender(iframe),
  }}
  injectJavaScript={`
    setTimeout(() => {
      const iframeDoc = document.querySelector('iframe').contentDocument;
      // 替换为你找到的实际选择器
      const menuBtn = iframeDoc.querySelector('.document-header__menu-button');
      if (menuBtn) menuBtn.style.display = 'none';
    }, 1200); // 延迟确保iframe加载完成
    true;
  `}
/>

注意事项 #

• 若DocumentCloud更新界面结构，类名可能变化，需重新检查选择器。
• 确保Webview的sandbox参数包含allow-scripts（你的配置已满足），否则脚本无法执行。

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