我想在一个元素上切换全屏,但是requestFullscreen()
函数不起作用,尽管它是在响应用户交互(MDN)时被调用的。我不知道为什么它不适用于修改键(MDN)。
以下是我的fiddle代码片段:
document.addEventListener("keyup", (e) => {
e.preventDefault();
if (document.fullscreenElement)
return document.exitFullscreen()
document.body.firstElementChild.requestFullscreen(); // Fails on CTRL, SHIFT, ALT ...
});
我也不明白它是如何*工作的,如果你按下鼠标按钮或任何其他按键之间的每一个切换与CTRL,SHIFT,或ALT键。例如,这将工作:鼠标左键单击,Shift,Shift,鼠标左键单击,Shift,Shift...
我需要**这个为我的Chrome扩展程序工作,所以也许有一个解决方案?谢谢。
2条答案
按热度按时间xn1cxnb41#
如果我没理解错的话,你的意思是当你第一次和元素交互的时候,比如说,先点击元素,然后按回车键,它就可以工作了。但是当你第一次来的时候,试着按任何键,它都不能进入全屏。
一般来说,
keydown
和keyup
事件可以在不首先单击元素的情况下触发。这意味着如果您在keyup
事件上触发全屏模式,那么它应该在没有用户交互的情况下工作,但它不会。原因是-requestFullscreen()
方法需要在用户手势的React下被接触,例如用户交互触发的点击事件、触摸事件或keydown
事件。这是浏览器的安全功能,可以防止网站在未经用户同意的情况下接管用户的屏幕。当用户通过点击按钮、点击屏幕或按键与网页进行交互时,浏览器认为用户已经发起了操作,因此允许网站使用
requestFullscreen()
方法接管屏幕。但是,如果
requestFullscreen()
方法是从一个不是由用户交互触发的keyup事件调用的,比如一个脚本,比如一个按键,浏览器可能不允许网站接管屏幕,因为它不能决定这个动作是由用户还是由脚本启动的。这可能是
requestFullscreen()
方法在从并非由用户运动启动的keyup事件调用时失败的原因,例如在使用CTRL、SHIFT或ALT等修改键时。bvjxkvbb2#
更新的MDN文档-Features gated by user activation-详细说明了触发输入事件的激活条件。简而言之,Esc键和用户代理保留的快捷键(又名修改键)不会触发瞬时激活。没有解决方案。