ポップアップウィンドウ展開時にPOST通信でデータを送信する

JavaScriptで新たにポップアップウィンドウを作成し、通常はGET通信で新たにページを取得するのですが、展開時に多くのデータを送信出来ないデメリットがあります。

なので展開時にPOST通信で処理してみました。

ポップアップウィンドウのPOST通信

１．まずabout:blunkで開く

まずはポップアップウィンドウを空で開きます。

//空のポップアップウィンドウの作成。
exportWin = windowPostOpen("", "popup", false, true, false);

//ウィンドウ作成
function windowPostOpen(url, title, toolbar, scrollbar, fullscreen){
    var option = "location=no, directories=no, status=yes";
    if (scrollbar == true) {
        option = option + ", scrollbars=yes";
    } else {
        option = option + ", scrollbars=no";
    }
    var width = screen.availWidth;
    var height = screen.availHeight;
    if (width > 1024) width = 1024;
    if (height > 768) height = 768;
    var left = (screen.availWidth - width) / 2;
    var top = (screen.availHeight - height) / 2;
    if (toolbar == true) {
        option = option + ", toolbar=yes, menubar=yes, resizable=yes";
        option = option + ", width=" + (width-8) + ", height=" + (height-58-78) + ", left=" + left + ", top=" + top;
    } else {
        option = option + ", toolbar=no, menubar=no, resizable=yes";
        option = option + ", width=" + (width-8) + ", height=" + (height-58) + ", left=" + left + ", top=" + top;
    }

    return window.open(url, title, option);
}

２．formを作成作成

//form作成
var form = document.createElement("form");
//target属性は、どこにアクションURLを開くかを指定します。
form.target = "popup";
//POST通信設定。
form.method = 'post';
//遷移先のaction設定。
form.action = '/action.php';

３．input要素を作成し送信データを設定

POSTで通信するためにtype="hidden"にデータ設定。

//input type='hidden' を作成し、送信データを設定。
var submitType = document.createElement("input");
submitType.setAttribute("name", "hoge");
submitType.setAttribute("type", "hidden");
submitType.setAttribute("value", "送信データ");

//form に作成したinput要素を追加。
form.appendChild(submitType);
var body = document.getElementsByTagName("body")[0];

４．フォームの送信

一旦DOMに追加しないと送信出来ないので送信時のみ追加し送信後に削除。

var body = document.getElementsByTagName("body")[0];

//一旦domに書き出して
body.appendChild(form);
//送信！
form.submit();
//送信後に作成したform要素の削除
body.removeChild(form);

▼▼▼▼▼▼▼▼▼▼以下全ソース▼▼▼▼▼▼▼▼▼▼

//空のポップアップウィンドウの作成。
exportWin = windowPostOpen("", "popup", false, true, false);

//form作成
var form = document.createElement("form");
//target属性は、どこにアクションURLを開くかを指定します。
form.target = "popup";
//POST通信設定。
form.method = 'post';
//遷移先のaction設定。
form.action = '/action.php';

//input type='hidden' を作成し、送信データを設定。
var submitType = document.createElement("input");
submitType.setAttribute("name", "hoge");
submitType.setAttribute("type", "hidden");
submitType.setAttribute("value", ”送信データ”);

//form に作成したinput要素を追加。
form.appendChild(submitType);
var body = document.getElementsByTagName("body")[0];

//一旦domに書き出して
body.appendChild(form);
//送信！
form.submit();
//送信後に作成したform要素の削除
body.removeChild(form);

//ウィンドウ作成
function windowPostOpen(url, title, toolbar, scrollbar, fullscreen){
    var option = "location=no, directories=no, status=yes";
    if (scrollbar == true) {
        option = option + ", scrollbars=yes";
    } else {
        option = option + ", scrollbars=no";
    }
    var width = screen.availWidth;
    var height = screen.availHeight;
    if (width > 1024) width = 1024;
    if (height > 768) height = 768;
    var left = (screen.availWidth - width) / 2;
    var top = (screen.availHeight - height) / 2;
    if (toolbar == true) {
        option = option + ", toolbar=yes, menubar=yes, resizable=yes";
        option = option + ", width=" + (width-8) + ", height=" + (height-58-78) + ", left=" + left + ", top=" + top;
    } else {
        option = option + ", toolbar=no, menubar=no, resizable=yes";
        option = option + ", width=" + (width-8) + ", height=" + (height-58) + ", left=" + left + ", top=" + top;
    }

    return window.open(url, title, option);
}