どうやら、一筋縄ではいかない砂の迷宮に迷い込んだらしい。この顛末を書き残しておくか。
JavaScript（ウェブページに動きを与える呪文体系）という古の魔法で、私はささやかな仕掛けを組んでいた。 ポップアップ（新たに開く小さな窓）で開いた画面に表示されたサムネイル画像。 それをクリックすれば、さらに別のポップアップで、オリジナルの画像が開く…はずだった。
しかし、現実は非情だった。新たな窓は開かず、元のポップアップ画面が無慈悲にも上書きされてしまうのだ。これでは、まるで迷宮の同じ場所をぐるぐる彷徨うようなもの。使い勝手は最悪だ。
なぜ、こんな奇妙な現象が起きるのか？私は、この謎を解き明かすため、window.open()（新たな窓を開く呪文）という魔法の、深淵を覗き込む決意をした。これは、その詠唱法に隠された、巧妙な罠と真実を解き明かす、一人の魔法使いの冒険の記録である。
この羊皮紙のあらまし
この羊皮紙が導く者
- JavaScriptで、ポップアップという名の新たな窓を開きたいと願う者
window.open()という、古の魔法の真の作法を知りたい探求者- レガシーシステムの改修で、ポップアップの挙動に悩む開発者
- 「なぜタブで開くのか？」という謎に直面している冒険者
- 二重・三重のポップアップを正しく実装したい魔法使い
砂漠の道標
- JavaScript - ウェブページに動きや処理を与えるプログラミング言語。
- ポップアップ - 新たに開く独立した小さなウィンドウのこと。
window.open()- JavaScriptで新しいウィンドウやタブを開くための関数。- 第三引数（options） -
window.open()で窓の見た目や機能を指定するパラメータ。 menubar=no- ポップアップウィンドウのメニューバーを非表示にする指定。- タブ - ブラウザ内で複数のページを同じウィンドウで切り替える仕組み。
- ブラウザ - ウェブページを表示するソフトウェア（Chrome、Edge、Firefox等）。
古の魔法：window.open()の詠唱法
JavaScriptで新たな窓を開くには、window.open()という呪文を唱える。その詠唱法は、三つの要素で構成される。
let obj = window.open(url, [name, [options]]);
| 詠唱要素 | 説明 |
|---|---|
url |
開きたい世界の座標。 |
name |
窓の名前。 '_blank'または''で、新たな窓を開くとされる。 |
options |
窓の装飾。 ここに、この魔法の最大の罠が潜んでいる。 |
詠唱の罠と真実
長年の探求の末、私はついに真実に辿り着いた。
第三引数のoptionsに、たとえ一つでも何らかの装飾を指定しない限り、ブラウザは「新たな窓」ではなく、「新たなタブ」として世界を開いてしまうのだ。
つまり、真のポップアップ（新たな独立した窓）を呼び出すには、menubar=noのような、ささやかな装飾の指定が、必須の儀式だったのである。
儀式の実践：二重ポップアップ
この秘儀を使い、二重に窓を開く儀式を執り行う。
最初の羊皮紙：main.html
ボタンをクリックすると、popup.htmlをポップアップで開く。
最初の扉を開く、ボタン
<div class="button" onclick="window.open('popup.html', '_blank', 'menubar=no');"> ポップアップ </div>
二枚目の羊皮紙：popup.html
サムネイル画像をクリックすると、今度はsample.pngを、さらに別のポップアップで開く。このmenubar=noという、ささやかな詠唱こそが、全てを正しく機能させる鍵だったのだ。
二つ目の扉を開く、サムネイル
<img src="sample.png" onclick="window.open('sample.png', '_blank', 'menubar=no');" style="width: 100px;" />
ついに現れた、真のポップアップウィンドウ
羊皮紙を巻く前に
長年、多くの魔法使いを悩ませてきたwindow.open()の謎。その核心は、実に些細な、しかし決定的な「第三引数の有無」という掟にあった。
window.open()の真実
- 第三引数の指定が必須 -
menubar=noなど、何らかのオプションを指定しない限り、ブラウザは新たな窓ではなくタブとして開く。 - 全ブラウザ共通の挙動 - Chrome、Edge、Firefox、Safariの全てで、この掟は一貫している。
- レガシーシステムでの実用性 - 古いシステムの改修時に、今もなお必要とされる知識である。
注意すべき点
- モダンなウェブ開発では、ポップアップはユーザビリティの観点から推奨されない場合が多い。
- ブラウザのポップアップブロック機能により、意図通り動作しない可能性がある。
まとめ
window.open()の第三引数。この些細な、しかし決定的な作法の違いに気づくまで、私は無駄な時間を浪費した。
レガシーなシステムの改修などで、この古の魔法に触れる機会は、今もなお存在する。この羊皮紙が、同じようにポップアップの罠にハマり、途方に暮れている、未来の冒険者の助けとなることを願う。
おっと、どうやら相棒が腹を空かせたようだ。今日はこのへんで筆を置くとしよう。
砂漠で見つけた魔法のランプ
この羊皮紙で語られたwindow.open()の秘儀は、以下の古文書にその詳細が記されている。
- window.open() | 神々の公式な魔導書 (MDN)
ラクダの独り言
ご主人が「窓が開かねえ！」とか言って、黒い画面に呪文を打ち込んでいる。俺に言わせりゃ、窓なんてのは、風が通って涼しけりゃそれでいいだろうに。開いたり閉じたり、まったく面倒なことだ。それより、俺の餌箱の蓋を開けてくれねえかな。やれやれだぜ。
