在計時器內設置時，HTML5全屏無法正常工作

Question

我正在嘗試此代碼。 單擊p時，它應該會生成圖像並將其容器div設置為全屏。

<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>

它的作用是先等待5秒鍾，然后在圖像之前添加好所有內容，但未將其設置為全屏。 但是，如果您刪除計時器並正常進行操作：

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

它可以正常工作，它會預先添加圖像並立即將其設置為全屏顯示。

這是故意的還是錯誤？ 不管哪種方式，有什么方法可以使它起作用？

Answer 1

必須響應於用戶輸入事件（例如，按鍵，鼠標事件）來調用該方法。

在計時器內設置時，HTML5全屏無法正常工作

問題描述

1 個解決方案

解決方案1
1 已采納 2013-03-20 11:44:12

在計時器內設置時，HTML5全屏無法正常工作

問題描述

1 個解決方案

解決方案1 1 已采納 2013-03-20 11:44:12

解決方案1
1 已采納 2013-03-20 11:44:12