TikTok应用内WebView嵌入视频功能异常及跳转问题

问题现象 #

• 从TikTok个人简介点击网站链接时，TikTok应用内WebView直接打开嵌入视频的全屏视图，而非网站主页
• 返回主页需点击三次返回按钮，且返回后主页内的嵌入视频无法正常工作

实用解决方案 #

1. 拦截TikTok WebView自动跳转
   在前端代码里先判断当前是否处于TikTok应用的WebView环境，若是则延迟初始化嵌入的TikTok视频，避免页面加载时被自动触发全屏跳转。
   判断环境+延迟初始化的示例代码：

   function isTikTokWebView() {
     const userAgent = navigator.userAgent.toLowerCase();
     return userAgent.includes('tiktok');
   }
   
   window.addEventListener('load', () => {
     if (isTikTokWebView()) {
       setTimeout(() => {
         // 重新加载TikTok嵌入脚本
         const embedScript = document.createElement('script');
         embedScript.src = 'https://www.tiktok.com/embed.js';
         embedScript.async = true;
         document.body.appendChild(embedScript);
       }, 1000);
     }
   });
   

2. 改为用户触发式加载视频
   不要在页面初始化时直接渲染嵌入视频，改为添加点击按钮，让用户主动点击后再加载TikTok嵌入内容，从根源避免WebView自动触发跳转。

3. 给iframe添加sandbox权限限制
   给嵌入视频的iframe加上sandbox属性，限制其自动跳转的权限：

   <iframe sandbox="allow-scripts allow-same-origin allow-popups" 
           src="你的TikTok视频嵌入地址" 
           width="320" height="560" 
           frameborder="0" allowfullscreen></iframe>
   

4. 优化页面viewport配置
   确保网站的viewport元标签配置正确，适配移动端WebView：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   

说明 #

TikTok应用内WebView会自动识别页面中的TikTok视频内容并触发特殊跳转逻辑，通过以上方法可以规避该行为，保证页面正常加载和视频功能可用。

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