如何使用 Fancybox3 聚焦到 iframe afterShow

Posted 2023-05-09

【中文标题】如何使用 Fancybox3 聚焦到 iframe afterShow

【英文标题】：How focus to iframe afterShow with Fancybox3

【发布时间】：2020-02-25 22:43:45

【问题描述】：

我可以使用命令 instance.focus () 关注 iframe，因此在打开 iframe 后按下键盘上的“右”键即可在其中导航（查看本书），而无需先指向“ >" 按钮或指向 iframe 内的某个位置。

但是使用这种方法，我失去了通过“ESC”键关闭 iframe 窗口的可能性，我想避免这种情况。

只需将instance.focus()命令放在注释中即可恢复“ESC”键的操作。

如何在不干扰“ESC”键的情况下以另一种方式获得 iframe 的焦点？

<a data-fancybox data-type="iframe" href="https://e.issuu.com/embed.html?embedType=script&u=actes_sud&d=l_onard_anatomiste_liseuse&p=">Léonard de Vinci anatomiste</a>

$(document).on("afterShow.fb",function(e,instance,slide)instance.focus());

Codepen

【参考方案1】：

fancybox 监听主页上的 keydown 事件，但是，这些事件不会从 iframed 页面内冒泡。如果您可以控制 iframed 页面，则可以在其中添加自己的 keydown 侦听器并在 ESC 上关闭 fancybox（使用parent.jQuery.fancybox.close();）。

【讨论】：

我无法控制 iframed 页面...我对此进行了测试： $(document).on("afterShow.fb",function(e,instance,slide) $('. fancybox-iframe').contents().find("#ird3-button-next").focus(); );没有成功...

... 由于浏览器安全性，符合预期。如果您由于 CORS (developer.mozilla.org/en-US/docs/Web/HTTP/CORS) 而无法访问 iframe 内容，那么您就无法对 iframed 页面进行任何操作。

感谢 Janis 的干预 很可能是 CORS 的问题...等待其他建议，包括此应用程序程序员的建议...

我刚才注意到您正在显示 issuu 查看器，我可以告诉您，它与 youtube 视频一样 - 一旦 iframed 页面获得焦点，您就会失控并且可以不听按键事件。

OK Janis 因此，我可以通过 instance.focus () 获得焦点，但我失去了 ESC 的可能性，或者我将 instance.focus () 放在评论中以保留我的ESC；）我认为您是fancybox 开发人员？如果是这样，你的另一个问题：打开单个图像（不是画廊）时，fancybox 是否有可能，鼠标滚轮可以放大？？？同样，在图像库中，鼠标滚轮用于在图像中导航，如果一个参数可以允许缩放，那就太好了……谢谢 ;)