问题描述：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返回的嵌入代码：
在前端视图中，这些内容被包裹在一个隐藏的div中，并在Fancybox触发时显示：
@if($html)
@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嵌入脚本加载之后可以调用它。
-
调用函数： 最理想的调用时机是在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视频内容。在集成此解决方案时，请务必注意调用时机和潜在的性能影响，以确保最佳的用户体验。
