javascript - 强制显示一个 div 并覆盖全屏中的任何内容

Question

我有一个 Chrome 扩展程序，可以在页面中插入一个菜单，但是每当任何 Flash 或 html5 视频播放器全屏显示时，视频播放器之外的任何内容都是不可见的。

我可以同时全屏显示两个对象(一个在另一个之上)，还是有其他方法可以做到这一点？我宁愿不必将 html 专门插入不同网站的不同位置，因为现有的视频播放器种类繁多。该解决方案应该适用于所有视频播放器。

编辑:

从那时起，许多网络已经转向使用 html5 而不是 flash，因此这已成为几乎所有网站上都可以做的事情。

这是我最终编写和使用的代码。希望这会对某人有所帮助:

document.addEventListener("webkitfullscreenchange", function(){//Whenever an element becomes or stops being in full screen
    //first, grab the page's fullscreenElement
    var fse = document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement;

    if(fse){//if there is a fullscreened element
        fse.appendChild(menu);//append the menu inside the fullscreened element
    }else{//if nothing is in full screen
        if(window.self !== window.top){//if we are in an iframe
            menu.remove();//hide menu if we are in an iframe
        }else{//if we arn't in an iframe
            document.body.insertBefore(menu, document.body.firstChild);//show menu
        }
    }
});

Answer 1

这不太可能。视频播放器全屏实现占据整个屏幕；您不再有可覆盖的浏览器窗口。

这与在浏览器中全屏显示不同，在浏览器中您仍然可以使用正常的浏览器窗口。

编辑:进一步扩展；

对于任何使用 Flash 的视频播放器，这是绝对不可能的，因为您没有机会叠加任何 HTML 元素；全屏由 Flash 本身处理，您不能用它做任何事情。

对于 HTML5，根据我的测试，这似乎也是不可能的。我去了this sample page ，在开发工具中编辑 HTML 以尝试在视频元素中插入一个 div，但它不会呈现。

如果您可以控制页面，则可以全屏显示容器 div 而不是视频本身，然后实现您想要的效果，但由于您无法控制相关页面，所以这可能不会对你有帮助(除非你想尝试替换页面内的 ID/等，但即使这样也不能保证成功；如果页面 JS 已经处理了相关元素，替换 ID 不会更新它们)