どうやら、一筋縄ではいかない砂の迷宮に迷い込んだらしい。この顛末を書き残しておくか。
JavaScriptという古の魔法で、私はささやかな仕掛けを組んでいた。ポップアップで開いた画面に表示されたサムネイル画像。それをクリックすれば、さらに別のポップアップで、オリジナルの画像が開く…はずだった。
しかし、現実は非情だった。新たな窓は開かず、元のポップアップ画面が無慈悲にも上書きされてしまうのだ。これでは、まるで迷宮の同じ場所をぐるぐる彷徨うようなもの。使い勝手は最悪だ。
なぜ、こんな奇妙な現象が起きるのか？私は、この謎を解き明かすため、window.open()という呪文の、深淵を覗き込む決意をした。これは、その詠唱法に隠された、巧妙な罠と真実を解き明かす、一人の魔法使いの冒険の記録である。
この羊皮紙のあらまし
この羊皮紙が導く者
- JavaScriptで、ポップアップという名の新たな窓を開きたいと願う者
window.open()という、古の魔法の真の作法を知りたい探求者
古の魔法：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()の第三引数。この些細な、しかし決定的な作法の違いに気づくまで、私は無駄な時間を浪費した。Chrome、Edge、Firefox、Safari…試した全てのブラウザで、この奇妙な掟は共通だった。
レガシーなシステムの改修などで、この古の魔法に触れる機会は、今もなお存在する。 この羊皮紙が、同じようにポップアップの罠にハマり、途方に暮れている、未来の冒険者の助けとなることを願う。
おっと、どうやら相棒が腹を空かせたようだ。今日はこのへんで筆を置くとしよう。
ラクダの独り言
ご主人が「窓が開かねえ！」とか言って、黒い画面に呪文を打ち込んでいる。俺に言わせりゃ、窓なんてのは、風が通って涼しけりゃそれでいいだろうに。開いたり閉じたり、まったく面倒なことだ。それより、俺の餌箱の蓋を開けてくれねえかな。やれやれだぜ。
