JavaScriptによるsubmit()で新しいタブが開くことを規制したい

Webの画面上にあるイメージをクリックすることで、POSTでsubmitする処理ですが、IE11では処理を行っているタブとは別に新しいタブが開いてしまします。
新旧のタブではそれぞれPOSTで遷移した内容が表示されます（画面上に表示される内容は同一です）が、それぞれ別にリクエストが発行されているため、チェックのため埋め込んだのワンタイムパスワードは異なっています。

Chromeでは、IEとは異なり新しいタブは開かず同一タブ内で画面が遷移する（これが想定している動きです）のですが、なぜIEでは別の新しいタブを開いてしますのか、また新しいタブを開くことは規制できるか、教えてください

JavaScript
1
2// 登録内容の確認・変更処理本体
3var goToKc0100 = function(p1, p2) {
4	$('form')
5	.attr('action', '/mypage/userupdate')
6	.append('<input type="hidden" name="param1" value="' + p1 + '" />')
7	.append('<input type="hidden" name="param2" value="' + p2 + '" />')
8	.submit();
9};
10
11// 登録内容の確認・変更処理イベント受付部
12$('.s1 a').click(function () {
13	var p1 = document.getElementById('data1').value;
14	var p2 = document.getElementById('data2').value;
15	goToKc0100(p1, p2);
16	return false;
17});

追記：
ローカルの開発環境ではこの現象は再現しないのですが、商用と商用の確認のためのステージング環境では再現します。
開発環境との違いは、プロトコルがHTTPSになっていることです。

行動規範の内容に同意します

回答1件

ベストアンサー

preventDefault を使用した場合はどうでしょう。

投稿2016/01/07 07:06

tozjp

総合スコア790

KatsumiTanaka

2016/01/07 07:32

return false;を置き換えるのですよね？改善はしませんでした。デバッガでトレースすると、submit()が行われたときに新しいタブを開いているようです。

tozjp

2016/01/07 14:01

最低限条件が揃うように書いてみましたが、再現しません。ローカルサーバー（xammp）ですが、以下をhttpsで動かしてみました。これそのまま再現環境に置けますか？ <!doctype html> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="s1"> <a href="javascript:void(alert('The default hasn't prevented!'))">[click]</a> </div> <form method=post></form> <input id=data1 value=a> <input id=data2 value=b> <script> var goToKc0100 = function(p1, p2) { $('form') .attr('action', '/mypage/userupdate') .append('<input type="hidden" name="param1" value="' + p1 + '" />') .append('<input type="hidden" name="param2" value="' + p2 + '" />') .submit(); }; $('.s1 a').click(function () { var p1 = document.getElementById('data1').value; var p2 = document.getElementById('data2').value; goToKc0100(p1, p2); return false; }); </script>

KatsumiTanaka

2016/01/08 01:31

理由は別にありましたが、解決しました tozjpさんのテストコードでは、HTML内にformが定義されており、その属性や内容を追加するように記述されていますが、当初想定している処理では<form>で定義されたタグがなく、JavaScript内で<form>タグを作成してsubmitするようでした＃正直なところ、ソース≒仕様書というサイトのメンテなので、何が本来の仕様なのかはよくわかりません・・・しかし、仕様追加で別のイベント処理で新しいウィンドウを起動する処理が追加されており、その処理のためにHTML内にターゲットを指定した以下のような<form>タグが追加されていました <form id="oldmypage" action="/oldmypage/mypage" method="POST" target="mypage_old"> このターゲット指定によって自動的に新しいウィンドウが作成されてましたで、コードを以下のように修正することによって、新しいウィンドウが開かれることはなくなりました $('form') .attr('action', '/mypage/userupdate') .attr('target', '_self') .append('<input type="hidden" name="param1" value="' + p1 + '" />') .append('<input type="hidden" name="param2" value="' + p2 + '" />') .submit(); いろいろとコメント、ありがとうございましたテストコードを書いていただかなければ、<form>タグが複数存在することに想像が及びませんでした

行動規範の内容に同意します