解决Fancybox模态框中TikTok视频嵌入后消失的问题-js教程-PHP中文网

解决Fancybox模态框中TikTok视频嵌入后消失的问题

本教程详细阐述了在Fancybox模态框中嵌入TikTok视频时，视频立即消失的问题。该问题源于TikTok嵌入脚本误删自身iframe的行为。解决方案是利用MutationObserver动态插入一个“占位”元素，以确保TikTok脚本在模态框加载时删除的是占位符而非实际视频iframe，从而实现TikTok视频的稳定显示。

问题背景与根源分析

在使用@fancyapps/ui（fancybox 5）等现代模态框库嵌入来自不同源（如youtube、vk、tiktok）的视频时，我们可能会遇到一个特定于tiktok视频的奇怪现象：当tiktok视频被加载到模态框中时，它会立即消失，尽管通过浏览器开发者工具检查，视频的iframe元素仍然存在于dom中。与之形成对比的是，youtube和vk的视频能够正常显示。

这种问题的症状表现为：

TikTok视频在模态框打开后瞬间消失。
视频元素在DOM中依然可见，但不再渲染。
如果快速打开模态框，或在模态框打开后立即刷新页面，视频有时会正常显示。
一旦关闭模态框，视频便会再次消失。

经过深入分析，问题的根源在于TikTok官方嵌入脚本（https://www.tiktok.com/embed.js）的特殊行为。该脚本在加载时，会遍历页面上所有带有tiktok-embed类的<blockquote>元素。其工作机制是盲目地删除每个blockquote.tiktok-embed元素内的第一个HTML子元素，并用实际的视频iframe替换它。

在页面首次加载时，blockquote.tiktok-embed内部的第一个元素通常是一个空的占位符或一些初始的HTML结构，TikTok脚本删除并替换它，一切正常。然而，当这些嵌入内容被动态加载到模态框中，并且TikTok脚本可能已经执行过一次之后，问题就出现了。此时，blockquote.tiktok-embed内部的第一个元素很可能已经是TikTok脚本自己之前插入的实际视频iframe。当模态框触发TikTok脚本再次尝试“修复”或“初始化”嵌入时，它会再次删除第一个子元素，导致它删除了自己的视频iframe，从而造成视频消失。

解决方案：利用MutationObserver进行行为修正

为了解决TikTok脚本的这种自删除行为，我们需要一种机制来“欺骗”它，确保在它每次尝试删除第一个子元素时，总有一个“替罪羊”——一个无害的占位符元素——供它删除，而不是实际的视频iframe。MutationObserver是JavaScript提供的一个强大API，它允许我们监视DOM树的变化。我们可以利用它来检测TikTok脚本何时插入了iframe，并在iframe之前动态地插入一个虚拟的占位元素。

核心代码实现

以下是用于修正TikTok嵌入行为的JavaScript函数：

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

  // 创建一个MutationObserver实例
  const mutationObserver = new MutationObserver(
    (entries) => {
      entries.forEach(entry => {
        // 获取当前观察到的目标元素（blockquote.tiktok-embed）内的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'); // 添加一个类以便识别
          // 将虚拟元素插入到iframe之前，使其成为第一个子元素
          entry.target.insertBefore(dummyElement, currentIframe);
        }
      })
    }
  );

  // 为每个找到的TikTok嵌入容器设置观察器
  futureTikTokEmbeds.forEach(
    embed => {
      mutationObserver.observe(
        embed,
        {
          childList: true, // 观察子节点的添加或删除
        }
      );
    }
  );
}

登录后复制

代码解析

patchTikTokBehavior(context = document):
- 该函数接受一个可选的context参数，用于指定MutationObserver的观察范围。默认情况下，它会观察整个document。在模态框场景中，将context限制为模态框的内容元素可以提高效率。
context.querySelectorAll('blockquote.tiktok-embed'):
- 选取所有带有tiktok-embed类的<blockquote>元素，这些是TikTok视频的嵌入容器。
new MutationObserver(...):
- 创建一个MutationObserver实例。它接收一个回调函数，当DOM变化发生时会被调用。
回调函数逻辑:
- entries.forEach(entry => { ... }): 遍历所有发生的DOM变化记录。
- entry.target: 指向发生变化的DOM节点，在这里是blockquote.tiktok-embed元素。
- currentIframe = entry.target.querySelector('iframe'): 查找当前容器内是否存在TikTok插入的iframe。
- currentDummy = entry.target.querySelector('.dummy-element'): 检查我们是否已经插入了虚拟占位符。
- if (currentIframe && !currentDummy): 这是关键条件。如果TikTok的iframe已经被插入，但我们的虚拟占位符还没有，那么就执行插入操作。
- const dummyElement = document.createElement('div'); dummyElement.classList.add('dummy-element');: 创建一个普通的div元素，并添加一个特定类名以便识别。
- entry.target.insertBefore(dummyElement, currentIframe);: 将这个虚拟div元素插入到iframe之前。这样，当TikTok脚本下次尝试删除第一个子元素时，它会删除这个dummyElement，而iframe则得以保留。
mutationObserver.observe(embed, { childList: true }):
- 对每个blockquote.tiktok-embed元素启动观察。
- childList: true：配置观察器，使其在目标节点的子节点被添加或移除时触发回调。这正是我们需要的，因为TikTok脚本会添加或删除子节点。

集成与使用示例

要使上述解决方案生效，您需要在TikTok视频内容被加载到DOM中，并且在Fancybox模态框准备显示或已经显示之后调用patchTikTokBehavior函数。

千面视频动捕

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

查看详情

以下是一个将patchTikTokBehavior集成到Fancybox事件中的示例：

// 确保在DOM加载完成后调用
document.addEventListener('DOMContentLoaded', () => {
    // 对页面上所有现有的TikTok嵌入进行一次初始修补
    // 这对于不在模态框中但可能仍然受到影响的嵌入很有用
    patchTikTokBehavior();

    // 配置Fancybox以在模态框内容加载后应用修补
    Fancybox.bind("[data-fancybox]", {
      on: {
        // 'done' 事件在幻灯片内容完全加载并显示后触发
        // 'slide' 参数包含了当前幻灯片的DOM元素
        done: (fancybox, slide) => {
          // 对当前幻灯片的内容应用TikTok行为修补
          // 将 slide.content 作为 context 传入，限制观察范围
          patchTikTokBehavior(slide.content);
        },
        // 如果您的Fancybox版本或配置需要，也可以在 'afterLoad' 事件中调用
        // afterLoad: (fancybox, slide) => {
        //   patchTikTokBehavior(slide.content);
        // }
      }
    });
});

登录后复制

在您的Laravel Blade视图widgets.index_iframe_tik_tok_widget中，TikTok视频的HTML结构如下：

@if($html)
    <div>
        <span data-thumb="{{ $preview }}" data-fancybox="{{ $index->id }}" ></span>
        <div style="display: none" id="dialog-content-{{ $index->id }}-{{ $key }}">
            {!! $html !!} {{-- 这里包含 <blockquote class="tiktok-embed">...</blockquote> --}}
        </div>
    </div>
@endif

登录后复制

确保{!! $html !!}渲染出的blockquote.tiktok-embed元素在Fancybox打开时是可见的，并且上述JavaScript代码能够在其加载后执行。表明Fancybox会从DOM中获取已存在的隐藏内容。当Fancybox将#dialog-content-...中的内容移动或复制到模态框中并使其可见时，patchTikTokBehavior函数就应该被调用。

注意事项

调用时机至关重要：patchTikTokBehavior函数必须在TikTok视频的<iframe>被插入到DOM中之后，并且在Fancybox模态框内容变得可见之前或之后立即调用。在Fancybox.bind的on.done事件中调用是一个可靠的选择，因为它确保了内容已经加载并准备好显示。
作用域限制：通过将slide.content作为context参数传递给patchTikTokBehavior，可以限制MutationObserver的观察范围，使其仅关注当前模态框内的DOM变化，而不是整个文档，从而提高性能。
TikTok脚本依赖：此解决方案依赖于TikTok官方嵌入脚本（tiktok.com/embed.js）已加载并执行。确保该脚本在您的页面中正确引入。
特定问题解决：此方法是专门针对TikTok嵌入脚本的特定行为模式而设计的。对于YouTube、VK等其他视频平台，它们通常不会有此类问题，因此无需应用此修补。

总结

通过巧妙地运用MutationObserver，我们能够有效地绕过TikTok嵌入脚本的缺陷，确保其视频内容在Fancybox模态框中能够稳定、持续地显示。这种方法提供了一个健壮且非侵入性的解决方案，极大地提升了用户体验，并使得在多源视频集成场景中，TikTok视频的嵌入变得无缝可靠。理解问题的根源——TikTok脚本的自删除行为——是找到这一创新解决方案的关键。

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