JavaScript/HTML5 全屏 API
<div id="divbody">
<button id="begin">Click me</button>
<script>
$(document).ready(function() {
$("#begin").click(function() {
var e = document.getElementById('divbody');
e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
});
document.addEventListener("webkitfullscreenchange",function(){
if (document.webkitIsFullScreen) {
//alert('a');
document.webkitCancelFullScreen();
}
}, false);
});
</script>
</div>
下面的代码基本上应该是一进入就取消全屏。然而,上面的代码不起作用(例如,它进入全屏但不会取消回来)。但是,通过取消注释 webkitfullscreenchange 事件处理程序中的警报,它实际上会取消。
我很难理解为什么会这样。另外,如果不使用警报,我将如何实现我想要做的事情?
谢谢。
更新
我已经尝试了所有评论,但似乎不起作用。对此的任何帮助将不胜感激!
<div id="divbody">
<button id="begin">Click me</button>
<script>
$(document).ready(function() {
$("#begin").click(function() {
var e = document.getElementById('divbody');
e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
});
document.addEventListener("webkitfullscreenchange",function(){
if (document.webkitIsFullScreen) {
//alert('a');
document.webkitCancelFullScreen();
}
}, false);
});
</script>
</div>
The following code basically should cancel full screen as soon as it enters. However, the code above does not work (e.g., it enters full screen but does not cancel back). However, by uncommenting the alert in the webkitfullscreenchange event handler, it does actually cancel.
I have hard time understanding why this is so. Also, how would I achieve what I am trying to do without using alert?
Thanks.
UPDATE
I have tried all the comments, but it does not seem to work. Any help on this would be greatly appreciated!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
像这样的alert() 解决问题的问题始终是事件顺序的问题。一种几乎总是有效的解决方案是将有问题的代码放在一个短计时函数中:
更新
将 setTimeout() 放在侦听器内当前的 CancelFullScreen 位置。
Questions like this where an alert() fixes a problem is always a matter of the sequence of events. One solution that almost always works is to put the offending code in a short timing function:
UPDATE
Put the setTimeout() in place of your current CancelFullScreen, inside the listener.
试试这个:
Try this: