タイトルだけ読んでも・・・何言ってるかよく分かりませんね。例えばformからsubmitしてデータを保存、と同時に保存したデータでPDFレポートを新しいウィンドウで出力したい・・なんてことありません？そんなとき、javascriptでwindow.openするのが普通ですが、最近のブラウザではポップアップブロック機能が働いてしまいます。それを強引に回避してみます。

確認した環境

Mac OS X 10.8
Google Chrome 35
Safari 6.1.5
Firefox 30

※なお、htmlファイルをローカルに置いて実行した場合だと、上手くいかないようです。。

form

フォームの作成の仕方にコツがあります。以下のようにtarget=”dummy”にしておくこと（”dummy”は任意の文字列）。こうしておくと、submitボタンを押した時に新しいウインドウが開きます。

📄form

...
<form action="/dummy"
      name="new_post"
      data-real-url="/posts"
      method="post"
      target="dummy">
...

actionにはダミーのパス/dummyを指定しています。data-real-urlには本当にPOSTしたいURLを指定します。ダミーパス/dummyには空白のHTMLページを用意しておきます。

さて、この状態でsubmitボタンを押すと・・・

新しいウィンドウでdummyページが開く
formのあるページは何も変化しない

という状態になるはずです。

formをいじくる

先程新しいウインドウで開くようにしたdummyページにJavascriptを仕込んでおきます。だいたい以下のような感じ。（要jquery）

📄blank.js

$form = $(window.opener.new_post);
$form.removeAttr("target");
$form.removeAttr("action");
$form.attr("action", $form.data("realUrl"));
$form.submit();

window.openerにてフォーム画面が取得できるので、こいつでformからtarget要素を取り除き、data-real-urlのパスをactionのパスに置き換えます。その後submitをかけるというわけです。なんとも強引だぜ。

遷移先で

遷移先画面（submit後の画面）から先程新しく開いたdummyページを取得します。window名が”dummy”で開かれているので、Javascriptで取得することができます。

📄after.js

var win = open("", "dummy");
// あとは煮るなる焼くなり・・・
win.close(); // 閉じたり
win.location = "/report"; // 他のURLに遷移させたり

以上。変な広告とか表示させないように正しく利用しましょう。

ポップアップブロックを回避してsubmitと同時に新しいウィンドウを開く