如何在iframe中调用Fancybox 3并在父窗口显示图片？

嗨，我来帮你搞定这个跨iframe调用Fancybox 3的问题！你之前的代码不生效，主要是因为Fancybox 3的API和版本2差异很大，而且之前的代码逻辑也有小问题——在document.ready回调里的this并不是你点击的链接元素，自然拿不到正确的图片地址。

下面是针对Fancybox 3的可行解决方案，分步骤来：

1. 先确认父窗口的基础配置 #

首先确保父窗口已经正确引入jQuery和Fancybox 3的资源，并且可以做一些全局默认配置（可选，但能统一样式）：

$(document).ready(function() {
  // 父窗口的Fancybox全局配置，按需调整
  $.fancybox.defaults = {
    toolbar: true, // 显示工具栏
    smallBtn: true, // 显示右上角小关闭按钮
    gallery: {
      enabled: true // 开启相册分组切换
    }
  };
});

2. 修改iframe中的代码 #

在iframe里，我们需要给相册链接绑定点击事件，阻止默认跳转，然后把图片信息传递给父窗口的Fancybox来打开：

假设你的iframe里相册链接是这样的：

<a class="gallery-link" href="image-1.jpg" data-caption="海边日落" data-fancybox="my-gallery">查看图片1</a>
<a class="gallery-link" href="image-2.jpg" data-caption="山间晨雾" data-fancybox="my-gallery">查看图片2</a>

对应的JS代码改成这样：

$(document).ready(function() {
  // 给所有相册链接绑定点击事件
  $(".gallery-link").on("click", function(e) {
    e.preventDefault(); // 阻止链接默认的跳转行为

    // 从当前点击的链接上获取图片信息
    const imageSrc = $(this).attr("href");
    const imageCaption = $(this).data("caption");
    const galleryGroup = $(this).data("fancybox");

    // 调用父窗口的Fancybox打开图片
    parent.$.fancybox.open([
      {
        src: imageSrc,
        caption: imageCaption,
        type: "image"
      }
    ], {
      // 这里可以单独配置这个相册的参数，和父窗口的全局配置合并
      gallery: {
        enabled: true,
        preload: [0, 2] // 预加载前后的图片
      }
    });
  });
});

3. 关键注意事项 #

• 同源策略：要确保iframe和父窗口是同域名的，否则浏览器的同源策略会阻止你调用父窗口的方法，这时候就得额外配置跨域权限了（一般同域场景下不用管）。
• 资源加载顺序：确保父窗口和iframe里的jQuery、Fancybox都加载完成后再执行代码，避免出现$或$.fancybox未定义的错误。

这样修改后，点击iframe里的相册链接，图片就会在父窗口的顶部以Fancybox 3的样式展示啦！

内容的提问来源于stack exchange，提问作者Febe