解决Fancybox模态框中TikTok视频消失的策略-js教程-PHP中文网

解决Fancybox模态框中TikTok视频消失的策略

霞舞

发布： 2025-10-04 13:20:12

原创

172人浏览过

解决Fancybox模态框中TikTok视频消失的策略

本文探讨并解决了在Fancybox模态框中嵌入TikTok视频时视频意外消失的问题。核心原因在于TikTok的嵌入脚本错误地删除了其自身生成的iframe。解决方案是利用Mutation Observer监听DOM变化，并在TikTok脚本尝试删除iframe前，动态插入一个占位元素，从而确保TikTok脚本删除的是占位元素而非实际视频内容，保证视频正常显示。

问题描述：Fancybox模态框中TikTok视频的意外消失

在使用fancybox（例如@fancyapps/ui": "^5.0.17"）模态框嵌入来自不同来源（如youtube、vk和tiktok）的视频时，我们可能会遇到一个特定问题：youtube和vk视频能正常显示，但tiktok视频在模态框打开后会立即消失。尽管视频元素仍在页面的dom结构中，但在视觉上却不可见。奇怪的是，如果模态框打开后迅速刷新页面，或者在模态框打开瞬间以极快的速度操作，视频有时会短暂显示。然而，一旦关闭模态框，视频便会再次消失。

问题的核心在于TikTok的官方嵌入脚本的行为。TikTok的嵌入脚本在加载时，会查找页面中的blockquote.tiktok-embed元素，并将其内部的第一个HTML元素删除，然后替换为实际的视频iframe。当页面首次加载时，blockquote内部通常是一个空的占位符或一些元数据。然而，当这些嵌入内容被动态加载到Fancybox等模态框中时，TikTok的脚本可能会在模态框内容渲染后再次执行。此时，blockquote内部的“第一个元素”可能已经变成了TikTok脚本自身先前插入的视频iframe。这就导致了一个自我删除的循环：TikTok脚本误删了它自己创建的视频iframe，从而导致视频在模态框中消失。

以下是TikTok视频嵌入内容的典型结构，其中$html变量包含了由TikTok OEmbed API返回的嵌入代码：

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@world_walkerz/video/7218998983937625349" data-video-id="7218998983937625349" data-embed-from="oembed" style="max-width: 605px;min-width: 325px;" id="v62804243901872250">  </blockquote>
<script async="" src="https://www.tiktok.com/embed.js"></script>

登录后复制

在前端视图中，这些内容被包裹在一个隐藏的div中，并在Fancybox触发时显示：

@if($html)
    <div>
        <span data-thumb="{{ $preview }}" data-fancybox="{{ $index->id }}" ></span>
        <div style="display: none" id="dialog-content-{{ $index->id }}-{{ $key }}">
            {!! $html !!}
        </div>
    </div>
@endif

登录后复制

解决方案：利用Mutation Observer修复TikTok嵌入行为

为了解决TikTok视频的自我删除问题，我们可以利用JavaScript的Mutation Observer API来监听DOM的变化。其核心思想是：当TikTok脚本删除了其内部的占位符并插入了实际的iframe后，我们会立即重新插入一个“虚拟元素”（dummy element）作为blockquote内的第一个子元素。这样，即使TikTok脚本再次执行删除操作，它删除的也将是这个虚拟元素，而不是视频iframe本身。

解决方案代码

/**
 * TikTok的嵌入脚本在首次渲染（例如在模态框中）且嵌入脚本已加载后，
 * 会删除其自身的iframe。这是因为该脚本盲目地删除了嵌入容器中的第一个元素。
 * 最初这是一个占位符，但在首次加载后，它就变成了实际的iframe。
 *
 * 因此，每当iframe被渲染时，我们都会重新添加一个虚拟元素，以便将来被TikTok脚本删除。
 *
 * @param {HTMLElement} context - 搜索TikTok嵌入元素的上下文，默认为document。
 */
function patchTikTokBehavior(context = document) {
  // 查找当前上下文中的所有TikTok嵌入块
  const futureTikTokEmbeds = Array.from(context.querySelectorAll('blockquote.tiktok-embed'));

  // 创建一个Mutation Observer实例，用于监听DOM变化
  const mutationObserver = new MutationObserver(
    (entries) => {
      entries.forEach(entry => {
        // 获取当前嵌入块中的iframe和虚拟元素
        let currentIframe = entry.target.querySelector('iframe');
        let currentDummy = entry.target.querySelector('.dummy-element');

        // 如果存在iframe但不存在虚拟元素，则重新插入一个虚拟元素
        if (currentIframe && !currentDummy) {
          const dummyElement = document.createElement('div');
          dummyElement.classList.add('dummy-element'); // 添加类名以便识别
          entry.target.insertBefore(dummyElement, currentIframe); // 将虚拟元素插入到iframe之前
        }
      })
    }
  );

  // 对每个TikTok嵌入块应用Mutation Observer
  futureTikTokEmbeds.forEach(
    embed => {
      mutationObserver.observe(
        embed,
        {
          childList: true, // 监听子节点的添加或删除
        }
      );
    }
  );
}

登录后复制

实现与集成

引入JavaScript代码： 将上述patchTikTokBehavior函数添加到您的项目中，确保在Fancybox和TikTok嵌入脚本加载之后可以调用它。

千面视频动捕
千面视频动捕是一个AI视频动捕解决方案，专注于将视频中的人体关节二维信息转化为三维模型动作。

27

查看详情

调用函数： 最理想的调用时机是在Fancybox模态框内容被完全加载并显示之后。您可以利用Fancybox提供的生命周期事件来实现这一点。例如，当Fancybox打开（done事件）或内容准备好（load事件）时调用此函数。

// 假设您已经初始化了Fancybox
// 例如，在Fancybox实例创建后或者在Fancybox打开事件中调用
Fancybox.bind("[data-fancybox]", {
  // 其他Fancybox配置...
  on: {
    done: (fancybox, slide) => {
      // 在模态框内容加载并显示后，对其中的TikTok嵌入进行修复
      patchTikTokBehavior(slide.$content[0]);
    },
    // 如果您的Fancybox内容是动态加载的，可能需要在内容添加到DOM后立即调用
    // 例如，在动态加载内容的回调函数中
  }
});

// 如果您的TikTok嵌入块在页面加载时就存在，也可以在页面加载完成后调用一次
// 确保在TikTok的embed.js脚本加载并执行之后调用
document.addEventListener('DOMContentLoaded', () => {
  patchTikTokBehavior();
});

登录后复制

请注意，patchTikTokBehavior函数接受一个可选的context参数。当在Fancybox回调中调用时，传入slide.$content[0]可以确保只修复当前模态框内的TikTok嵌入，而不是整个页面。

注意事项

调用时机： 确保patchTikTokBehavior函数在TikTok的embed.js脚本加载并尝试渲染其内容之后执行。如果您的TikTok内容是动态加载的，务必在内容被添加到DOM并TikTok脚本有机会处理它之后，再调用此修复函数。
性能考量： Mutation Observer会持续监听DOM变化，理论上会带来一些性能开销。但对于有限数量的TikTok嵌入，这种开销通常可以忽略不计。如果页面上有大量动态变化的元素，需要权衡其影响。
浏览器兼容性： Mutation Observer API在现代浏览器中得到了广泛支持。对于需要支持旧版浏览器的项目，可能需要考虑Polyfill或替代方案，但这在当前Web开发中已不常见。
第三方脚本更新： 此解决方案依赖于TikTok嵌入脚本的当前行为。如果TikTok未来更新其嵌入逻辑，可能会导致此修复方案失效。因此，在TikTok嵌入代码更新后，需要重新评估并可能调整此解决方案。

总结

通过理解TikTok嵌入脚本的自我删除机制，并巧妙地运用Mutation Observer，我们能够有效地解决在Fancybox等模态框中TikTok视频消失的问题。这种方法通过在关键时刻插入一个虚拟元素，改变了TikTok脚本删除的目标，从而保护了实际的视频iframe，确保了用户能够正常观看TikTok视频内容。在集成此解决方案时，请务必注意调用时机和潜在的性能影响，以确保最佳的用户体验。

以上就是解决Fancybox模态框中TikTok视频消失的策略的详细内容，更多请关注php中文网其它相关文章！