パラメータの送信を伴うポップアップ画面の開き方

親画面のパラメータをPOSTで送信しつつ、ポップアップ画面を開こうとすると、通常はブラウザのポップアップブロック機能に阻まれて、開くことができません。ユーザがポップアップブロックを解除すれば問題ありませんが、公開サイトの場合はそうもいかないので、大抵の場合は、ポップアップブロックを解除せずにポップアップ画面を開きたい、という話の流れになります。

なので、その時のポップアップ画面の開き方についてメモしておきます。

手順としては、①空ページでポップアップ画面を開く、②親画面のパラメータをポップアップ画面に送信しつつ指定したURLの画面を開く、という流れになります。

ポップアップ画面を開く親画面のHTML

<form name="frmPopup">
    <input type="hidden" id="p1" value="123">
    <input type="hidden" id="p2" value="456">
    <input type="hidden" id="p3" value="789">
    <button type="button" onclick="openPopup();">ポップ画面を開く</button>
</form>

呼び出されるJavaScript関数

function openPopup(){
    // １．空ページでポップアップ画面を開く
    var name = "popup";
    var option = "width=600,height=300,menubar=no,toolbar=no,location=no,status=no,resizable=no,scrollbars=no";
    window.open("about:blank", name, option);
    
    // ２．親画面のパラメータをポップアップ画面に送信しつつ、指定したURLの画面を開く
    var f = document.frmPopup;
    f.action = "test.html";
    f.method = "POST";
    f.target = name;
    f.submit();
}

window.openのオプション「resizable」や「scrollbars」などはブラウザによっては機能しません。ポップアップ画面のウィンドウを複数のブラウザで同じように表示させることはほぼ不可能に近く、色々と制限があって、PCの環境によっては動作しなかったりするので、ポップアップ画面を扱う場合、事前に要件を満たせるかどうか確認しておくことが大事です。

ポップアップ画面を開く

JavaScriptで子画面から親画面のコントロールの値を参照する方法

var p1 = window.opener.document.getElementById('p1');
var p2 = window.opener.document.getElementById('p2');
var p3 = window.opener.document.getElementById('p3');
alert("p1=" + p1.value + ", p2=" + p2.value + ", p3=" + p3.value);

また、子画面を閉じて親画面を最前面に表示する方法

function closePopup(){
    if(!window.opener || window.opener.closed)
    {
        window.close();
    }
    else
    {
        window.opener.focus();
        window.close();
    }
}

最近のブラウザではセキュリティ上の問題からなのか「window.opener.focus()」で親画面を最前面に表示することができません。どうしても表示したい場合は親画面で「alert()」を表示するしかなさそうなので、できれば早い段階でUIの見直しをした方が賢明です。

• window.open - Web API インターフェイス | MDN