JS / jQueryは、プログラムで「クリックされた」リンクのデフォルトの動作をサポートしていません。
できることは、フォームを作成して送信することです。この方法では、window.location
またはを使用する必要window.open
はありません。これらは、ブラウザによって不要なポップアップとしてブロックされることがよくあります。
このスクリプトには2つの異なる方法があります。1つは3つの新しいタブ/ウィンドウを開こうとする方法(IEとChromeでは1つだけ開く、詳細は以下)、もう1つはリンクのクリック時にカスタムイベントを発生させる方法です。
方法は次のとおりです。
HTML
<html>
<head>
<script src="jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
<button id="testbtn">Test</button><br><br>
<a href="https://google.nl">GOOGLE</a><br>
<a href="http://en.wikipedia.org/wiki/Main_Page">WIKI</a><br>
<a href="https://stackoverflow.com/">SO</a>
</body>
</html>
jQuery(script.js)
$(function()
{
// Try to open all 3 links by pressing the button
// - Firefox opens all 3 links
// - Chrome only opens 1 of them without popup warning
// - IE only opens 1 of them WITH popup warning
$("#testbtn").on("click", function()
{
$("a").each(function()
{
var form = $("<form></form>");
form.attr(
{
id : "formform",
action : $(this).attr("href"),
method : "GET",
// Open in new window/tab
target : "_blank"
});
$("body").append(form);
$("#formform").submit();
$("#formform").remove();
});
});
// Or click the link and fire a custom event
// (open your own window without following the link itself)
$("a").on("click", function()
{
var form = $("<form></form>");
form.attr(
{
id : "formform",
// The location given in the link itself
action : $(this).attr("href"),
method : "GET",
// Open in new window/tab
target : "_blank"
});
$("body").append(form);
$("#formform").submit();
$("#formform").remove();
// Prevent the link from opening normally
return false;
});
});
これは、各リンク要素に対して行われます。
- フォームを作成する
- 属性を与える
- DOMに追加して送信できるようにする
- 提出する
- フォームをDOMから削除し、すべての痕跡を削除します*邪悪な笑いを挿入します*
これで、新しいタブ/ウィンドウがロードされました"https://google.nl"
(または必要なURLがあれば、それを置き換えてください)。残念ながら、この方法で複数のウィンドウPopup blocked
を開こうとすると、2番目のウィンドウを開こうとするとメッセージバーが表示されます(最初のウィンドウはまだ開いています)。
私がこの方法にたどり着いた方法についての詳細はここにあります:
window.open
またはを使用せずに新しいウィンドウ/タブを開くwindow.location.href