2016年11月26日(土)

Webページをフルスクリーン表示にするボタンを設置する

• 0
• 3
• 2
• 25

Result

ボタンを押せばフルスクリーン表示になりますが、上記はiframeで表示していますのでここで押してもフルスクリーンにならないようです。このあたりはWeb developer guide | MDNの「フルスクリーンの要求が失敗する場合」に書かれていますのでご参照下さい。動作確認は右上のEdit in JSFiddleからお試しください。

尚、Vanilla jsでもコード量はほぼ変わらないのでjQueryを使っていないならVanilla jsで実装します。

jQuery

$(document).ready(function(){ //クリックで起動 $(".fullscreen_button").on("click", function() { //Full Screen APIを使う document.fullScreenElement && null !== document.fullScreenElement || !document.mozFullScreen && !document.webkitIsFullScreen ? document.documentElement.requestFullScreen ? document.documentElement.reque...