如何在React Native WebView中隐藏YouTube Shorts的“Watch again on YouTube”按钮

问题核心在于YouTube Shorts的嵌入页面DOM结构和普通视频不同，且结束页元素是动态生成的——视频播放完毕后才会渲染出来，初始注入的JavaScript无法捕获到这些晚出现的元素。以下是针对性的修改方案：

修改后的完整代码 #

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

const YouTubePlayer = ({ videoId }) => {
  const embedUrl = `https://www.youtube.com/embed/${videoId}?rel=0&modestbranding=1&controls=1`;
  
  const injectedJavaScript = `
    // 统一的隐藏目标元素函数
    const hideTargetElements = () => {
      // 隐藏普通视频结束页
      const normalEndscreen = document.querySelector('.ytp-endscreen-content');
      if (normalEndscreen) normalEndscreen.style.display = 'none';

      // 隐藏Shorts结束页核心容器
      const reelEndscreen = document.querySelector('.ytp-reel-endscreen-content');
      if (reelEndscreen) reelEndscreen.style.display = 'none';

      // 精准匹配"Watch again on YouTube"按钮（含Shorts版本）
      const watchAgainButtons = document.querySelectorAll('[aria-label*="Watch again"]');
      watchAgainButtons.forEach(btn => btn.style.display = 'none');

      // 隐藏Shorts专属的重播按钮容器
      const reelWatchAgainContainer = document.querySelector('.ytp-reel-watch-again-overlay');
      if (reelWatchAgainContainer) reelWatchAgainContainer.style.display = 'none';

      // 原有隐藏逻辑保留
      const logo = document.querySelector('.ytp-watermark');
      if (logo) logo.style.display = 'none';

      const shareButton = document.querySelector('.ytp-share-button');
      if (shareButton) shareButton.style.display = 'none';

      const overflowMenu = document.querySelector('.ytp-overflow-menu');
      if (overflowMenu) overflowMenu.style.display = 'none';

      const fullscreenButton = document.querySelector('.ytp-fullscreen-button');
      if (fullscreenButton) fullscreenButton.style.display = 'none';
    };

    // 监听DOM变化，动态捕获晚生成的元素
    const observer = new MutationObserver(() => {
      hideTargetElements();
    });

    // 监听body及所有子元素的变化
    observer.observe(document.body, {
      childList: true,
      subtree: true,
      attributes: false,
      characterData: false
    });

    // 初始执行一次
    hideTargetElements();

    // 禁止滚动
    document.body.style.overflow = 'hidden';
    window.addEventListener('touchmove', (event) => event.preventDefault(), { passive: false });

    // 阻止所有跳转到YouTube外部的行为
    document.addEventListener('click', (e) => {
      const target = e.target.closest('a, button');
      if (target && (target.href?.includes('youtube.com') || target.getAttribute('aria-label')?.includes('Watch again'))) {
        e.preventDefault();
        e.stopPropagation();
      }
    }, true);
  `;

  return (
    <WebView
      source={{ uri: embedUrl }}
      javaScriptEnabled={true}
      injectedJavaScript={injectedJavaScript}
      onLoadEnd={() => {}}
    />
  );
};

export default YouTubePlayer;

关键改进点 #

• 动态DOM监听：使用MutationObserver监听页面所有DOM变化，确保视频结束后生成的Shorts结束页元素一出现就被隐藏。
• 精准选择器覆盖：新增针对Shorts的专属选择器（如.ytp-reel-watch-again-overlay），并使用[aria-label*="Watch again"]模糊匹配所有含“Watch again”文本的按钮，避免类名变化导致失效。
• 增强跳转拦截：添加全局点击事件拦截，阻止所有跳转到YouTube外部的操作，包括Shorts结束页的重播跳转。
• 统一函数封装：将所有隐藏逻辑整合到一个函数中，减少冗余代码，便于维护。

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