全画面表示

自動起動での全画面表示はポプアップとしてブラウザにブロックされるが、ユーザー操作(クリック等)による全画面表示は機能する。

また、新規ウィンドウでサイズがズレるため、ウィンドウを開いた後にresizeToで画面サイズを調整する必要がある。

悪意のあるサイトから守るため、タイトルバーやアドレスバーは必ず表示される。非表示にしたい場合はブラザウの高度な設定で「信頼済みサイト」にドメイン(URL)が登録されている必要がある。


  view source
  JavaScript
  function fullOpen(strURL){
    var win;
    var options;

    if (navigator.appName.charAt(0)=='M'){
        options = "fullscreen=1,scrollbars=0";
    } else if (navigator.appName.charAt(0)=='N'){
        options = "location=no"
                + ",scrollbars=" + 0
                + ",left=" + "-4"
                + ",top=" + "-18"
                + ",width=" + screen.width
                + ",height=" + screen.height;
    }

    win = window.open(strURL, "", options);
    win.focus();
    win.moveTo(0,0);
    win.resizeTo(screen.availWidth,screen.availHeight);
}

(function(){
  var btn = document.getElementById('btn');
  var url = btn.getAttribute('href');
  btn.addEventListener('click', function(e){
    e.preventDefault();
    fullOpen(url);
  }, false);
})();

  CSS
  
  HTML
  
    ページのソースを表示 : Ctrl+U , DevTools : F12
    view-source:https://hi0a.com/demo/-js/js-fullscreen-window/
  
  ABOUT
  
    hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。
    プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。
    必要な機能の関数をコピペ利用したり勉強に活用できます。
    プログラムの動作サンプル結果は画面上部に出力表示されています。
    環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。
    画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。
    動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。
    途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。