JavaScriptを使ってPOSTした結果を別ウィンドウに表示させよう

通常のUIではありえないのですが、そういう要求があったので。

実際にはJQueryを使っちゃってますけど、使わなくても同じことはできるハズ・・・。

つか、HTML で form 作ってやる分には割りと簡単みたいなんですよね。formタグに target="_blank" つけるだけ！ みたいな。試してないけど。

<form action="https://example.com/" method="POST" target="_blank"> <input type="hidden" name="hoge" value="hoge"> <button type="submit">送信</button> </form>

で、これをJSからやるわけですよ。というわけで、頑張ってみました。

function postToNewWindow(){ window.open("", "nw"); let form = $("<form>", {action="https://example.com/", methoe="POST", target="nw"}); let input = $("<input>", {type="hidden", name="hoge", value="hoge"}); form.append(input); $('body').append(form); form.submit(); } window.document.write('<button type="button" onclick="postToNewWindow()">送信</button>');

肝は先にウィンドウを名前付き（上の例では nw）で open しておいて、form の target に開いたウィンドウを指定することと、フォームを body に append してから submit する事かな。

別の方法としては POST は Ajax(XMLHttpRequest) で非同期にしておいて、結果を開いたウィンドウに書き込むって手もあるのですが、ブラウザのアドレスバーが about:blank のままになってしまってユーザーに親切じゃないから、こちらはあまりやりたくない感じ。

とはいえ、参考にソースは残しておこうかな。

function ajaxWriteNewWindow(){ $.ajax({ type:"post", url:"https://example.com/", dataType:"text", data:"hoge=hoge" }) .done(function(data, textStatus, xhr){ let nw = window.open("", "nw"); nw.document.open(); nw.document.write(data); nw.document.close(); }) .fail(function(xhr, textStatus, error){ alert("通信に失敗しました"); }); } window.document.write('<button type="button" onclick="ajaxWriteNewWindow()">送信</button>');

Enjoy!