高見知英の技術ログ

技術関係のログをQiitaから移行してきました。プログラミングのほか、使っているアプリの細かい仕様についてなど書いていきます。

Element.requestFullscreen() APIはほかのウィンドウには使えない(っぽい)

きっかけはこの辺から。

github.com

ブラウザ上の任意の要素を画面いっぱいに表示するには、Element.requestFullscreen()というAPIを使います。

developer.mozilla.org

このAPIですが、どうもwindow.open()によって開かれたウィンドウから、元のウィンドウを操作することはできないようです。

というのも該当のAPIをウィンドウから開くとエラーが返るので。

document.body.requestFullscreen()
// Promise {<pending>}[[Prototype]]: Promise[[PromiseState]]: "fulfilled"[[PromiseResult]]: undefined (ウィンドウが最大化される)
window.opener.document.body.requestFullscreen()
// Promise {<rejected>: TypeError: fullscreen error
//    at <anonymous>:1:29}[[Prototype]]: Promise[[PromiseState]]: "rejected"[[PromiseResult]]: TypeError: fullscreen error
//    at <anonymous>:1:29(画面はなにも変わらない)

Chromewebkitプレフィックスをつけてもメソッドが呼び出せるらしいので使ってみるも、そちらもうまくいかず。

window.opener.document.body.webkitRequestFullscreen(); // -> undefined (なにもおこらない)

undefinedじゃあないんだよ・・・(まあこちらはdocument.body.webkitRequestFullscreen()を呼んでもなにもundefinedが返るのでそもそもそういうものっぽい)。

ちなみに「F11(ウィンドウの全画面化)」をエミュレーションすればなんとかなるのか?と思いましたが、それもダメっぽいです。

document.dispatchEvent( new KeyboardEvent( "keydown", { keyCode: 122 }) ); // -> trueが返って来るも、なにもおこらない

まあここは素直にユーザーに全画面表示の操作を提示するのが筋 というところでしょうか。