使網頁中的元素全屏

任何想法使頁面中的元素全屏？使網頁中的元素全屏

例如，div或img？

對於「全屏」，我的意思是它應該佔用用戶屏幕的所有空間，就像我們用全屏模型觀看視頻時一樣。我不希望瀏覽器窗口的任務欄/菜單欄顯示。

有什麼想法？

div.fullscreen{ 
    display:block; 

    /*set the div in the top-left corner of the screen*/ 
    position:absolute; 
    top:0; 
    left:0; 

    /*set the width and height to 100% of the screen*/ 
    width:100%; 
    height:100%; 
    background-color:red 
    }

我已經嘗試了上面的代碼，但它不是我想要的東西，它JUSE採取瀏覽器的內容區域，而不是用戶的computer'screen的所有空間。

來源

2011-03-04 hguser

不可能的。只有當用戶將瀏覽器放入全屏時。 – 2011-03-04 14:13:27

可能的重複[如何在Javascript全屏窗口（拉伸所有屏幕）]]（http://stackoverflow.com/questions/1125084/how-to-make-in-javascript-full-screen-windows-拉伸 - 全屏） – 2011-03-04 14:13:54

這不是重複的，在這裏他要求全屏只是一小部分，像div。並非整個頁面 – 2011-12-16 07:20:16

HTML元素無法跳出瀏覽器文檔窗口的界限。菜單和工具欄位於文檔窗口之外（這是瀏覽器窗口的子窗口），因此您無法「觸及」它們。

我認爲唯一的解決方案是用JavaScript觸發全屏模式。

這個答案顯示瞭如何做到這一點：How to make the window full screen with Javascript (stretching all over the screen)

來源

2011-03-04 14:14:57

一個falsh能達到這個嗎？我的意思是在頁面中放置一個閃光燈？由於在某些YouTube視頻網站中，您可以選擇：以全屏模式播放。 – hguser 2011-03-04 14:19:22

而事實上，我想要做的可以在這裏找到：http：//stackoverflow.com/questions/5192286/create-a-page-which-contain-a-flash-can-be-add-text- dynamiclly – hguser 2011-03-04 14:20:27

是的，但完全隱藏瀏覽器窗口。您需要在Flash中進行顯示，然後（即不使用HTML）。 – 2011-03-04 14:25:45

這是不可能的，它可能永遠不會。

想象一下，如果您訪問的每個網站都有免費的統治權限來接管您的桌面，會發生什麼情況。

來源

2011-03-04 14:14:02 Jon

您安裝的每個應用程序都有免費的統治權限來接管您的桌面...爲什麼Web應用程序不能提供相同的奢侈品？ – zzzzBov 2013-07-14 23:33:48

@zzzzBov：因爲在第一個例子中，您已經明確決定安裝應用程序（並且很可能在安裝過程中也授予了管理員權限），而在第二種情況下，您將面臨各種類型的驅動器攻擊。很明顯，全屏瀏覽器窗口是一個選項，但即使如此，你並沒有真正佔用整個屏幕 - 只是分配給瀏覽器的部分。 – Jon 2013-07-14 23:41:11

如果您限制開發人員被允許使用該功能，那麼您並不開放路過的攻擊。 – zzzzBov 2013-07-15 00:00:38

有一個相對較新的fullscreen JavaScript api它可以使一個元素全屏。

它被稱爲作爲用戶輸入的結果，以防止可能發生的濫用，但它是相對直接的使用：

_{代碼從MDN文章：}

document.addEventListener("keydown", function(e) { 
    if (e.keyCode == 13) { 
    toggleFullScreen(); 
    } 
}, false); 

function toggleFullScreen() { 
    if (!document.fullscreenElement && // alternative standard method 
     !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods 
    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
    } else { 
    if (document.cancelFullScreen) { 
     document.cancelFullScreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitCancelFullScreen) { 
     document.webkitCancelFullScreen(); 
    } 
    } 
}

來源

2013-07-14 23:32:02 zzzzBov

使網頁中的元素全屏

回答

相關問題