如何从WebView的onNavigationStateChange获取完整URL及查询参数？

1. 修正函数名拼写错误 #

你代码里存在函数名不匹配的问题：定义的回调函数是handleUrlChange，但onNavigationStateChange里调用的是urlChangeHandler，这会导致回调逻辑完全不执行，自然无法更新URL。先修正这个拼写错误：

<WebView 
   startInLoadingState={true} 
   source={{ uri: 'https://m.youtube.com/'}} 
   onError={err => console.warn(err)}
   originWhitelist={['https://m.youtube.com/']}
   onNavigationStateChange={({ url }) => {
      handleUrlChange(url) // 修正为正确的函数名
   }}
/>

2. 调整originWhitelist配置 #

当前的originWhitelist只写了https://m.youtube.com/（带末尾斜杠），可能会导致带路径的URL被判定为不在白名单内，无法正常捕获。将其修改为不带斜杠的域名格式，或使用通配符匹配所有子路径：

originWhitelist={['https://m.youtube.com']}
// 或者更宽松的通配符写法（如果需要匹配所有YouTube子域名）
// originWhitelist={['https://*.youtube.com/*']}

3. 使用onShouldStartLoadWithRequest替代onNavigationStateChange #

对于m.youtube.com这类前端路由驱动的单页应用，onNavigationStateChange可能无法准确捕获所有URL变化，这时改用onShouldStartLoadWithRequest回调能获取更完整的请求信息，包括带参数的完整URL：

const handleUrlRequest = (request) => {
  const { url } = request;
  if (url === videoUrl) return true; // 避免重复处理相同URL

  setVideoUrl(url);
  console.log(url); // 现在会输出完整的URL，比如https://m.youtube.com/watch?v=aqz-KE-bpKQ
  return true; // 返回true允许页面继续加载，返回false则拦截该导航
};

<WebView 
   startInLoadingState={true} 
   source={{ uri: 'https://m.youtube.com/'}} 
   onError={err => console.warn(err)}
   originWhitelist={['https://m.youtube.com']}
   onShouldStartLoadWithRequest={handleUrlRequest}
/>

额外注意事项 #

• 确保你的WebView依赖是最新版本，旧版本可能存在URL捕获的bug；
• 如果YouTube使用了iframe嵌套视频，必要时可开启allowUniversalAccessFromFileURLs={true}，注意此配置存在安全风险，仅在确认场景安全时使用。

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