用户交互后如何将焦点恢复到iframe的父级LightGallery实例？

我正在使用LightGallery灯箱库，在iframe中通过video.js播放视频。原本按esc键可关闭LightGallery实例，但用户与视频控件交互后，焦点会转移到控件上，导致该功能失效。

如何在用户与视频控件交互后，将焦点恢复到LightGallery实例？

我已尝试监听video.js的点击事件，但尚未找到恢复焦点使esc键重新生效的方法。我试过使用postMessage、blur等方法，仍无头绪，是否找错了方向？

尝试过的代码 #

player.on('click', function (evt) {
        console.log('iframe window', window.frameElement);
        
        evt.currentTarget.blur();

        window.postMessage("hello", "*")
        // var lg = document.getElementById('vidContainer');
        // var lg = document.getElementsByClassName('lightGallery');
        // console.log('lg', lg);
        // console.log('document', document);
        // lg.focus()
      });

• 核心逻辑：iframe内的视频控件获取焦点后，主页面的LightGallery无法捕获esc键事件，需要通过跨页面通信通知主页面重置焦点，或是直接全局监听esc键触发关闭。

1. iframe内监听多类交互事件，向主页面发信号
   不要仅监听点击，覆盖视频播放、暂停、控件获取焦点等场景，确保用户操作视频后立即通知主页面：

   player.on(['play', 'pause', 'focus'], function() {
       window.parent.postMessage('restore-lg-focus', '*');
   });
   

2. 主页面接收消息，重置LightGallery焦点
   在挂载LightGallery的页面添加消息监听，收到信号后让LightGallery容器获取焦点（注意给容器添加可聚焦属性）：

   window.addEventListener('message', function(event) {
       if (event.data === 'restore-lg-focus') {
           const lgContainer = document.querySelector('.lightGallery');
           if (lgContainer) {
               // 给容器添加tabindex使其可聚焦
               if (!lgContainer.getAttribute('tabindex')) {
                   lgContainer.setAttribute('tabindex', '-1');
               }
               lgContainer.focus();
           }
       }
   });
   

3. 备选方案：全局监听esc键直接关闭
   如果焦点重置仍有问题，直接绕开焦点限制，全局监听esc键触发LightGallery关闭：

   document.addEventListener('keydown', function(e) {
       if (e.key === 'Escape') {
           // 根据你的实例获取方式调整，这里假设用全局实例数组
           const lgInstance = window.lightGalleryInstances?.[0];
           if (lgInstance && lgInstance.opened) {
               lgInstance.closeGallery();
           }
       }
   });
   

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