以下のような動作がしたかったのですが、1, 2をやるようなコードが落ちてなかったので作りました。
- 新しいタブを開く
- 開いたタブからPOSTを送信する
- 戻ってきた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の機能を使って送信しています。処理の流れは以下。
- 新しいタブを開く
- JavaScriptで送信用にform要素を作り、htmlのbodyに追加
- 送信したい内容をinput要素に入れる
- 新しいタブをターゲットにしてsubmitを呼び出し
- htmlから、追加したform要素を消す
サンプル
以下の「ボタン」と書かれた緑の領域をクリックすると、POSTの結果が見られます。
ボタン
送信結果は以下。サンプルのソース
サンプルを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がどんどん積み重なってしまっていますね。