【HTML/CSS】JavaScriptで新しいタブを開き、そこからPOSTを送る【JavaScript】

以下のような動作がしたかったのですが、1, 2をやるようなコードが落ちてなかったので作りました。

  1. 新しいタブを開く
  2. 開いたタブからPOSTを送信する
  3. 戻ってきたwebページを表示する

内容的には新しいタブをtargetに指定してpost結果を表示するというのが正しいですが、やりたかったことベースでこのタイトルにしておきます。
というか無理やりJSで書いてますが、HTMLに新しいタブをtargetにしたformを用意しておいた方が簡単で処理も少ないような……。

ソースコード

このコードを呼び出すと、新しいタブで株式会社ネットアクティビティ様のHTTPアクセス POST送信 テスト確認用ページへ向けてPOSTを送信します。
サンプルなのでちょっと冗長に書いてます。

//フォームとwindowに設定する識別子
let form_id = 'temp-form';
let window_name = 'new_window';

window.open('', window_name); //新しいタブを開く
let form = document.createElement('form'); // フォーム要素を宣言
form.action = 'https://www.muryou-tools.com/test/aaaa.php'; // 投げる先のURLを設定
form.method = 'post'; // GETかPOST、今回はデータを送りたいのでpost
form.style.display = 'none'; // 要素を画面に表示しない
form.target = window_name; // 新しいタブがターゲット
form.id = form_id; // 後で消すためにID指定
document.body.appendChild(form); // HTMLのbody要素に作ったform要素を追加

//input要素作成、今回は2つ作る
let input1 = document.createElement('input'), input2 = document.createElement('input');
input1.type = input2.type = 'hidden';
//要素名と値を追加
input1.name = 'hoge';
input1.value = 'fuga';
input2.name = 'hello';
input2.value = 'world';
//form要素に作ったinput要素を追加
form.appendChild(input1);
form.appendChild(input2);

// 送信
form.submit();
// 後始末で削除
document.getElementById(form_id).remove();

解説

HTML5のformの機能を使って送信しています。処理の流れは以下。

  1. 新しいタブを開く
  2. JavaScriptで送信用にform要素を作り、htmlのbodyに追加
  3. 送信したい内容をinput要素に入れる
  4. 新しいタブをターゲットにしてsubmitを呼び出し
  5. htmlから、追加したform要素を消す

サンプル

以下の「ボタン」と書かれた緑の領域をクリックすると、POSTの結果が見られます。

ボタン

送信結果は以下。
f:id:wrongwrongwrongwrong163377:20181031221831p:plain

サンプルのソース

サンプルをHTMLとして独立させた内容です。

<!DOCTYPE html>
<html lang="ja">
    <meta charset="UTF-8" ;>
    <body>
        <p style="width:100%; height:100%; background-color:green; color:white; cursor: pointer;"
           onclick="
                let form_id = 'temp-form';
                //フォームとwindowに設定する識別子
                let window_name = 'new_window';
                window.open('', window_name); //新しいタブを開く
                
                let form = document.createElement('form'); // フォーム要素を宣言
                form.action = 'https://www.muryou-tools.com/test/aaaa.php'; // 投げる先のURLを設定
                form.method = 'post'; // GETかPOST、今回はデータを送りたいのでpost
                form.style.display = 'none'; // 要素を画面に表示しない
                form.target = window_name; // 新しいタブがターゲット
                form.id = form_id; // 後で消すためにID指定
                document.body.appendChild(form); // HTMLのbody要素に作ったform要素を追加
                
                //input要素作成、今回は2つ作る
                let input1 = document.createElement('input'), input2 = document.createElement('input');
                input1.type = input2.type = 'hidden';
                //要素名と値を追加
                input1.name = 'hoge';
                input1.value = 'fuga';
                input2.name = 'hello';
                input2.value = 'world';
                //form要素に作ったinput要素を追加
                form.appendChild(input1);
                form.appendChild(input2);
                
                // 送信
                form.submit();
                // 後始末で削除
                document.getElementById(form_id).remove();
        ">ボタン</p>
    </body>
</html>

おまけ

document.getElementById(form_id).remove();を呼び出さず、formを消さないままで居ると以下のようになります。formがどんどん積み重なってしまっていますね。
f:id:wrongwrongwrongwrong163377:20181031222141p:plain

参考にさせていただいたページ

qiita.com
clouds.tokyo