本文探讨并解决了在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返回的嵌入代码：
在前端视图中，这些内容被包裹在一个隐藏的div中，并在Fancybox触发时显示：
@if($html)id }}" >@endifid }}-{{ $key }}"> {!! $html !!}
解决方案：利用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视频内容。在集成此解决方案时，请务必注意调用时机和潜在的性能影响，以确保最佳的用户体验。
以上就是解决Fancybox模态框中TikTok视频消失的策略的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1526302.html
微信扫一扫 
支付宝扫一扫 
