本文介绍两种无需用户点击、在页面加载完成后自动触发 fancybox 5 iframe 弹窗的可靠方法，支持自定义关闭回调（如刷新页面），并提供可直接运行的代码示例与注意事项。
本文介绍两种无需用户点击、在页面加载完成后自动触发 fancybox 5 iframe 弹窗的可靠方法，支持自定义关闭回调（如刷新页面），并提供可直接运行的代码示例与注意事项。
Fancybox 5 默认需通过用户交互（如点击链接）触发，但实际开发中常需在页面初始化后自动弹出引导页、公告或外部 iframe 内容（例如嵌入的帮助文档或登录窗口）。以下两种方案均经官方文档验证，兼容性良好，推荐根据场景选择。
✅ 方案一：复用已有 DOM 选择器（推荐用于已有标记结构）
若你已按标准方式为元素添加了 data-fancybox 属性（如 ），可直接调用 Fancybox.fromSelector() 方法，无需重复配置参数：
// 确保 DOM 加载完成后再执行
document.addEventListener("DOMContentLoaded", () => {
Fancybox.fromSelector('[data-fancybox="iframe3"]');
});
该方法会自动读取目标元素的 href、data-preload 及其他 data 属性，并继承 Fancybox.bind() 中定义的全局配置（如 defaultType: "iframe"），但注意：on.destroy 等事件监听需单独传入——因为 fromSelector() 不自动合并 bind() 的 on 配置。如需关闭后刷新页面，应显式补充：
document.addEventListener("DOMContentLoaded", () => {
Fancybox.fromSelector('[data-fancybox="iframe3"]', {
on: {
destroy: () => window.location.reload()
}
});
});
✅ 方案二：纯编程式调用（更灵活，适合动态内容）
当不需要预设 DOM 元素，或需完全控制源地址、类型与选项时，使用 Fancybox.show() 更清晰：
document.addEventListener("DOMContentLoaded", () => {
Fancybox.show([
{
src: "https://google.com",
type: "iframe",
// 可选：设置 iframe 宽高、禁止滚动等
iframe: {
preload: false
}
}
], {
// 全局配置（仅对本次调用生效）
on: {
destroy: () => window.location.reload()
}
});
});
⚠️ 重要注意事项：
- 务必在
DOMContentLoaded或window.onload后执行，避免因 DOM 未就绪导致选择器失败； - 若页面含多个 Fancybox 实例，请确保
data-fancybox值唯一，或使用更精确的选择器（如#welcome-modal）； - 自动弹窗可能被浏览器弹窗拦截器阻止（尤其非用户手势触发时），建议搭配用户首次访问、按钮点击后延迟触发等友好策略；
-
Fancybox.show()的第一个参数是媒体项数组，即使只打开一个 iframe，也必须包裹为[ {...} ]。
两种方式均已在 Fancybox 5 官方文档 明确支持，可根据项目结构与维护性需求灵活选用。
