fullscreenApi使fullscreen元素具有内部元素和保存工作下拉列表的能力

fullscreen api make fullscreen element with internal elements and save ability to work dropdown

本文关键字：元素 工作 保存 下拉列表 能力 内部 fullscreen fullscreenApi      更新时间：2023-09-26

我可以使用全屏API使全屏任何具有许多内部元素的元素，并保存工作下拉列表和其他自定义元素的能力，这些元素的一部分位于页面的不同位置吗？

例如带有下拉菜单的div（例如https://code.google.com/p/ufd/)，当我将这个div设置为全屏时，下拉菜单将不起作用（下拉菜单仍起作用，但下拉菜单项列表隐藏在div后面）。

我希望下拉菜单在没有全屏的情况下仍然可以工作。

我可以这么做吗？更改下拉列表和其他元素的z索引是不合适的。

下拉式元素很可能附加到一个不是全屏元素的派生元素（例如文档主体）。如果是这种情况，您可以使用突变观察器来观察添加到文档主体中的特定元素（即下拉元素），并将它们移动到全屏元素下。


fullscreenMutationObserver: MutationObserver;
requestFullscreen(fullscreenElement) {
    if(document.fullscreenElement) {
      document.exitFullscreen();
      if(this.fullscreenMutationObserver) {
        this.fullscreenMutationObserver.disconnect();
      }
      return;
    }
    
    fullscreenElement.requestFullscreen();
    this.fullscreenMutationObserver = new MutationObserver(mutationRecords => {
      mutationRecords.forEach(mutationRecord => {
        mutationRecord.addedNodes.forEach(node => {
          if(node.isTheDropdownElementWeAreLookingFor()) {
            document.body.removeChild(node);
            document.querySelector(':fullscreen').appendChild(node);
          }
        });
      });
    });
    this.fullscreenMutationObserver.observe(document.body, { childList: true });
}
相关文章：