问题背景与根源分析
在使用@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.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类的元素，这些是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函数。以下是一个将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) {!! $html !!} {{-- 这里包含 ...--}} @endif
确保{!! $html !!}渲染出的blockquote.tiktok-embed元素在Fancybox打开时是可见的，并且上述JavaScript代码能够在其加载后执行。表明Fancybox会从DOM中获取已存在的隐藏内容。当Fancybox将#dialog-content-...中的内容移动或复制到模态框中并使其可见时，patchTikTokBehavior函数就应该被调用。
注意事项
- 调用时机至关重要：patchTikTokBehavior函数必须在TikTok视频的
- 作用域限制：通过将slide.content作为context参数传递给patchTikTokBehavior，可以限制MutationObserver的观察范围，使其仅关注当前模态框内的DOM变化，而不是整个文档，从而提高性能。
- TikTok脚本依赖：此解决方案依赖于TikTok官方嵌入脚本（tiktok.com/embed.js）已加载并执行。确保该脚本在您的页面中正确引入。
- 特定问题解决：此方法是专门针对TikTok嵌入脚本的特定行为模式而设计的。对于YouTube、VK等其他视频平台，它们通常不会有此类问题，因此无需应用此修补。
总结
通过巧妙地运用MutationObserver，我们能够有效地绕过TikTok嵌入脚本的缺陷，确保其视频内容在Fancybox模态框中能够稳定、持续地显示。这种方法提供了一个健壮且非侵入性的解决方案，极大地提升了用户体验，并使得在多源视频集成场景中，TikTok视频的嵌入变得无缝可靠。理解问题的根源——TikTok脚本的自删除行为——是找到这一创新解决方案的关键。
