HTML5 full-screen doesn't work when set inside a timer

Question

I am trying this code. It is supposed to generate an image and set its container div to full-screen when the p is clicked.

<html>
<head>
<style>
img { height: 643px; width: 860px; }
img:-moz-full-screen { height: 643px; width: 860px; }
div:-moz-full-screen { background: white; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
 $("p").click(function() {    
  setTimeout(function() {
    $("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
    $("div").get(0).mozRequestFullScreen();
  },5000);
 });
});
</script>
</head>
<body>
<p>Foo</p>
</body>

What it does is wiat for 5 seconds and prepend the image all right, but it is not set to full-screen. However, if you remove the timer and do it normally:

$("p").click(function() {
  $("body").prepend("<div><img src = 'http://i.stack.imgur.com/lBZKC.jpg?s=128&g=1' /></div>");
  $("div").get(0).mozRequestFullScreen();
});

it works fine, it prepends the image and immediately sets it to full-screen.

Is this intentional, or a bug? Either way, is there any way to make it work?

Answer 1

必须响应于用户输入事件（例如，按键，鼠标事件）来调用该方法。

HTML5 full-screen doesn't work when set inside a timer

Question

1 answers

solution1
1 ACCPTED 2013-03-20 11:44:12

HTML5 full-screen doesn't work when set inside a timer

Question

1 answers

solution1 1 ACCPTED 2013-03-20 11:44:12

solution1
1 ACCPTED 2013-03-20 11:44:12