React Native中如何用injectedJavascript获取HTML代码并隐藏YouTube头部

嘿，我来帮你搞定这个问题！你之前的代码没生效主要有两个原因：你用的元素选择器不对，而且YouTube页面是动态渲染的，注入的JavaScript可能在头部元素还没生成的时候就执行了。下面是具体的解决办法：

1. 找到正确的元素选择器 #

YouTube的页面结构（不管移动端还是桌面端）都没有叫header-bar的元素，它的头部导航栏常用的选择器有这些：

• 移动端：#header 或 ytd-masthead
• 桌面端：#masthead-container 或 ytd-masthead

为了兼容不同的布局，我们可以同时尝试多个选择器，确保能找到目标元素。

2. 确保JS在元素加载后执行 #

因为YouTube是动态渲染页面的，直接注入的JS可能在头部元素还没渲染出来时就跑完了，所以我们需要延迟执行或者等页面完全加载后再执行。

方案一：使用延迟执行（简单快捷） #

通过setTimeout给页面一点渲染时间，再执行隐藏逻辑：

render(){
  const jsCode = `
    setTimeout(() => {
      // 尝试多个选择器兼容不同布局
      const header = document.querySelector('ytd-masthead, #masthead-container, #header');
      if (header) {
        header.style.display = 'none';
        // 可选：隐藏视频播放时滚动出现的顶部栏
        const scrollHeader = document.querySelector('#player-theater-container');
        if (scrollHeader) scrollHeader.style.display = 'none';
      }
    }, 1500); // 1.5秒延迟可根据实际加载速度调整
  `;

  return(
    <WebView 
      style={{flex:1}} 
      javaScriptEnabled={true} 
      source={{uri: 'https://www.youtube.com/watch?v=c4Hi8OVEbuY&list=PLSlVQ0kIy6qzezeIJZW6SAl-cMiyvvbhN'}} 
      injectedJavascript={jsCode} 
      domStorageEnabled={true} // 开启DOM存储，保证YouTube正常加载
    />
  )
}

方案二：页面加载完成后执行（更可靠） #

利用WebView的onLoadEnd事件，在页面完全加载完成后再注入JS，这样能确保元素已经存在：

import React from 'react';
import { WebView } from 'react-native-webview';

class YouTubeWebView extends React.Component {
  // 保存WebView实例，方便后续注入JS
  webViewRef = null;

  hideYouTubeHeader = () => {
    const injectCode = `
      const header = document.querySelector('ytd-masthead, #masthead-container, #header');
      if (header) {
        header.style.display = 'none';
        // 可选：隐藏播放页的顶部控制栏
        const playerHeader = document.querySelector('#player-top');
        if (playerHeader) playerHeader.style.display = 'none';
      }
    `;
    // 注入JS到WebView
    this.webViewRef?.injectJavaScript(injectCode);
  };

  render(){
    return(
      <WebView 
        ref={ref => this.webViewRef = ref}
        style={{flex:1}} 
        javaScriptEnabled={true} 
        source={{uri: 'https://www.youtube.com/watch?v=c4Hi8OVEbuY&list=PLSlVQ0kIy6qzezeIJZW6SAl-cMiyvvbhN'}} 
        domStorageEnabled={true}
        onLoadEnd={this.hideYouTubeHeader} // 页面加载完成后触发
      />
    )
  }
}

export default YouTubeWebView;

额外注意事项 #

• YouTube的页面结构可能会随时更新，如果之后选择器失效，你可以打开Chrome开发者工具（或Safari调试），直接查看头部元素的类名/ID来更新选择器。
• 如果想要模拟桌面端YouTube页面，可以给WebView设置userAgent属性，比如：

  userAgent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"
  

  这时候选择器用#masthead-container会更准确。

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