Clip to Evernote

showModalDialogの子画面で画面遷移

先日次のような事を聞かれました。『showModalDialog()でポップアップした子画面にリンクを設置し、そのリンクをクリックして子画面自身にリンク先の内容を表示したい。ちなみにリンクの画面遷移はJavaScriptで行います。』といった感じです。なお、今回の対象ブラウザはInternet Explorer 6と7です。文字だけでは分かりにくいのでサンプルを用意してみました。

まず手始めに前述の要件を無視して、子画面に通常のリンクを張って試してみます。この時、リンクをクリックすると新しいウィンドウが開いてリンク先の内容が表示されます。これは子画面の<head>に<base target="_self" />を記述すれば回避出来ました。実際はJavaScriptで画面遷移を行うということなので、location.hrefで試してみます。結果は新しいウィンドウが開いてしまいます。どうやら<base target="_self" />location.hrefに適用されないようです。次にwindow.open("hoge.html",_self)を試してみますが、これも孫画面が開いてしまいます。さてどうしたものか。showModalDialog()で開く際、フレームのみのページを作ってその中に読み込めばとりあえずは対処出来るようですが、フレーム作成用のページが増えるので今回は都合が悪い。それに子画面のタイトルがフレーム用のページのままになるから画面遷移後に書き換える必要があります。その場合はwindow.titleで書き換えれば良いのかな。と、考えがすこし逸れ始めた時にふと思いつきました。_selfでは失敗したけど、window.nameでウィンドウ名を設定してからwindow.open()で指定すればどうだろうか?

window.name='kogamen';
window.open('./test.html','kogamen');

試してみると、新しいウィンドウは開かず、子画面にリンク先を開くことが出来ました。よって、showModalDialog()でポップアップしたウィンドウ内のリンクを子画面自身で開きたい場合は、子画面で開いているページの<head></head>に<base target="_self" />を記述。リンクをJavaScriptで遷移する場合はwindow.nameを設定して、window.open()で設定したウィンドウ名を指定。

<head>
  <base target="_self" />
</head>

window.name='kogamen';
window.open('./test.html','kogamen');

以上2点を実施することで実現出来そうです。まぁ終わってみるとすごく単純な話でした。

2011/09/12 00:18