コンテンツのフルスクリーン表示をページ遷移後も維持したい

Question

Webサイトを、メニューバーやタブなど、普段ディスプレイの上部に出ているものを全て非表示にし、フルスクリーン表示し、それを維持する方法を探しています。

イメージとしては、Youtubeで動画を全画面で再生しているときのような挙動で、escを押すと普通の表示に戻るような挙動を目指しています。

#参考サイト
https://w3g.jp/blog/html5_fullscreen_api
このサイトで公開されているコードを使用したところ、一時的な全画面表示には成功しました。
しかし、ページを遷移するとすぐに普通の画面にもどってしまい、再度ボタンを押す必要があります。

フルスクリーンの状態を維持するためのコード、もしくは全く別の方法でコンテンツの全画面表示を維持することができるようなコードがあれば教えていただきたいと思います。
よろしくお願いします。

Answer 1

全画面を維持したい場合、全画面にした部分を含め次ページ情報をajaxなどで読み取り、ページ遷移せずに書き換える必要があると思います。
URLを書き換えたい場合、最近のブラウザであれば、hisotyry.pushStateを使い書き換え、古いブラウザにも対応するならlocationのhash(URLの#以降)を変更して対応することになると思います。

実際に遷移した場合、どうしても最初は既定のスタイルで表示されてしまうため普通の画面に戻る瞬間はあると思いますが、遷移するときのパラメータに情報を渡すか、localstorageやcookieで状態を保存しておくなどして、load時のイベントで自動的にフルスクリーンにすれば戻してあげることは可能でしょう。

Comments

[ShogoChicago]

回答いただきありがとうございます。
ajaxの実装を簡単に解説してあるようなおすすめのサイトなどを教えていただけますと嬉しいです。

Answer 2

若干無理やり感はありますが、簡単な方法としては
あらかじめフルスクリーン表示用の中身は同じページを別に用意しておいて、全画面表示させるボタンを押した際にフルスクリーン表示用のページに遷移するようにして、そのフルスクリーン表示用のページを表示すると自動でフルスクリーンになるようにしておいて、質問で言う遷移先のページでは document.referrer を使用し、直前にいたURLがフルスクリーン表示用であればそのページのフルスクリーン表示用のページに遷移させるようにすれば実現は可能です。