iframeにPOSTでデータを送る

URL指定してiframe開くとき／開いたあととかに、POST形式でデータを送る方法について試したので、忘れないように書いておく
（GETならsrcのURLにクエリパラメータつけるだけで済むが、POSTはそうもいかない）

TL;DR

・iframe作る （ document.createElement ）
→このiframeには必ずnameつけておく
（・iframeにsrcでURLを指定する）
・form要素作る （ document.createElement ）
・form要素にactionで送信対象URLを、methodでPOSTを、targetでiframeのnameを、それぞれ指定する
・input要素作る （ document.createElement ）
・input要素にて、POSTで送信するデータをkey-value形式でname, valueを指定する
・input要素をform要素の下に配置する（ appendChild ）
→複数データを送りたい場合は、このinput要素作成をデータの個数分だけ繰り返す
（・iframe要素、form要素をbody下に配置する （ appendChild ））
・form要素を送信（.submit()）する
→iframeのonloadに合わせて実行するようにすると割と安全っぽい
（・form要素をページ上から削除（.remove()）する）

iframe_post.js

var frame = document.createElement("iframe");
frame.name = "receiveIframe";
frame.src = "https://hogehoge.ne.jp";

var form = document.createElement("form");
form.action = "https://hogehoge.ne.jp";  //POSTするデータの送信先URL
form.method = "POST";
form.target = "receiveIframe";  //上でiframeにつけたnameを指定

var sendData = document.createElement("input");
sendData.name = "price";
sendData.value = "180";
//これで、 price: 180 という感じのデータが送れる
form.appendChild(sendData);

//他にも送りたい場合は、データの数だけ繰り返す
//データの形式次第ではfor使ってもいいかも
/*var sendData1 = document.createElement("input");
sendData1.name = "version";
sendData1.value = "1.5";
form.appendChild(sendData1);*/
/*var sendData2 = document.createElement("input");
sendData2.name = "date";
sendData2.value = "2022/01/20";
form.appendChild(sendData2);*/

document.body.appendChild(frame);
document.body.appendChild(form);

var frameOnload = frame/onload = function () {
    form.submit();
    form.remove();
};

理屈

（素のJavaScriptだと）データをPOSTで送るには、基本form要素をsubmit()する形になるので、一時的なformを作り中身に送りたいデータ指定して、任意のiframeを対象にしてsubmit()すればいいよね、って話

わかれば単純ですよね