Question

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

例如带有下拉列表的div（例如https://code.google.com/p/ufd/），当我将此div设为全屏时，下拉列表将无效（下拉列表仍然有效，但下拉列表中的项目隐藏在div后面）。

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

我可以这样做吗？更改下拉列表的z-index和其他元素不合适。

Answer 1

下拉元素很可能被附加到一个不是全屏元素的后代元素（例如文档正文）。如果是这种情况，您可以使用 Mutation Observer 来监视添加到文档正文中的特定元素（即下拉元素）并将它们移动到全屏元素下。


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 });
}

全屏api使用内部元素制作全屏元素并保存工作下拉列表的功能

1 个答案: