Fancybox v5，如何使用多个 IFRAME 链接在关闭时重新加载到不同的 url？在 fancybox 上使用 $_GET

Question

目标：链接到 IFRAME 页面以获取 GET 值的多个按钮，并且可以在关闭后重新加载到不同页面。

<a id='DeleteButton-1' href='delete_email.php?EmailID=1' data-fancybox data-type='iframe'>1</a>
<a id='DeleteButton-2' href='delete_email.php?EmailID=2' data-fancybox data-type='iframe'>2</a>
<a id='DeleteButton-3' href='delete_email.php?EmailID=3' data-fancybox data-type='iframe'>3</a>

在 delete_email.php 上，我分配 $_GET 值，然后从 EmailID 中删除 MySQL 记录。

在 Fancybox v3 上，我可以分配不同的 fancybox 绑定以在关闭后转到不同的页面。

<a href='delete_email.php?EmailID=1' data-fancybox='DeleteEmail' data-type='iframe'>1</a>
<a href='delete_email.php?EmailID=2' data-fancybox='DeleteEmail' data-type='iframe'>2</a>
<a href='delete_email.php?EmailID=3' data-fancybox='DeleteEmail' data-type='iframe'>3</a>
<a href='show_email.php?EmailID=1' data-fancybox='ShowEmail' data-type='iframe'>1</a>
<a href='show_email.php?EmailID=2' data-fancybox='ShowEmail' data-type='iframe'>2</a>

Fancybox.bind('[data-fancybox="DeleteEmail"]', {
    on: { close: () => { location.href = 'email_trash.php'; } }
});

Fancybox.bind('[data-fancybox="ShowEmail"]', {
    on: { close: () => { location.href = 'email_inbox.php'; } }
});

问题是，Fancybox v5正在使用fancybox绑定DeleteEmail获取所有url并删除它们，而不是传递的单个EmailID。我认为它将它们视为像“画廊”一样的“组”，并将所有ID带到更新数据库。 我已经使用版本 3.5.7 与 5.0.36 验证了这一点。

我可以对所有内容进行默认绑定以重新加载到不同的页面，但如果我有“查看”按钮和“删除”按钮，则这不起作用。

Fancybox.bind('[data-fancybox]', {
    on: { "destroy": (fancybox, eventName) => { location.href = 'email_index.php'; }, },
});

我可以绑定一个特定的ID来将该按钮发送到特定的页面....

Fancybox.bind(document.getElementById("DeleteButton-1"), "[data-fancybox]", //redirect
Fancybox.bind(document.getElementById("DeleteButton-2"), "[data-fancybox]", //redirect 
Fancybox.bind(document.getElementById("DeleteButton-3"), "[data-fancybox]", //redirect 

但是，如果您有数百个按钮，这不是一个好主意。

所以我的问题是....

1. 是否有类似“类”的东西，我可以分配一组按钮，以便它知道要重新加载/重定向到哪个页面？ 所以关闭后查看按钮将转到 xxx.php，删除按钮将转到 yyy.php 页面？

2. 是否有更好的方法将值（例如 EmailID）传递到 IFRAME 页面，而不是使用 URL 中的 $_GET？

感谢您的帮助！

Answer 1

我建议添加不同的数据属性来指示操作，并使用“关闭”事件来检查：

Fancybox.bind('[data-fancybox]', {
  on: { 
    "close": (fancybox) => {
      // This is the element that launched Fancybox when clicked.
      // Check `dataset`, `classname`, etc and decide what to do next
      console.log(fancybox.options.triggerEl);
    },
  }
});