JavaScriptでtarget =“ _ blank”をシミュレートする方法


156

ユーザーがリンクをクリックすると、データベースのフィールドを更新してから、要求されたリンクを新しいウィンドウで開く必要があります。アップデートは問題ありませんが、別のハイパーリンクをクリックせずに新しいウィンドウを開く方法がわかりません。

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>

1
ん?target="_top"新しいウィンドウで開きません-開きますtarget="_blank"
Tomalak、2009年

リンクがすでに新しいウィンドウで開いている場合(target = "_ blank"により)、JavaScriptクリックハンドラーが既にデータベースを更新している場合、JavaScriptで新しいウィンドウを開く必要があるのはなぜですか?
Joel Mueller、

回答:


298
<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

2番目のパラメーターはオプションであり、ターゲットウィンドウの名前です。


2
window.open何がtarget="_blank"ありません-それは新しいウィンドウでURLを開きます。
ceejayoz、2009年

3
はい。window.open()の2番目の引数は、リンクにターゲットを設定するのと同様に、ウィンドウに付ける「名前」です。 developer.mozilla.org/En/DOM:window.open
Omer Bokhari

2
ああなるほど。window.openはFirefoxポップアップブロッカーによってブロックされますが、target = "_ blank"はブロックされません。クライアントに自分のウェブサイトからのポップアップを有効にするように依頼するだけですか?
Phillip Senn

7
FirefoxのようなポップアップブロッカーによってブロックされないJavaScriptソリューションはありますか?
ma11hew28 2010

4
@MattDiPasqualeブロッキングwindow.openは、ポップアップブロッカーの要点です。クリック操作に応じて電話をかけると、ブロックされない可能性が高くなります。
William Denniss、2011

19

これは役立つかもしれません

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);

IE11:「ランタイムJavascriptエラー:オブジェクトに対して有効なアクションではありません」
T-moty

8
この答えは、何が起こっているかの説明を追加することで改善できます
Elly Post

13

私はこれが完了して整理された取引であることを知っていますが、これが私のアプリの問題を解決するために使用しているものです。

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

基本的にここで起こっているのは、リンクにtarget=_blank属性があるかどうかのチェックを実行することです。そうでない場合は、リンクのトリガーを停止し、新しいウィンドウで開くように設定してから、プログラムでリンクをクリックします。

次のようにすれば、さらに一歩進んで、元のクリックの停止をスキップして(コードをよりコンパクトにできます)できます。

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

jQueryを使用して、属性のクロスブラウザーを追加する実装を抽象化する場合は、次の代わりにこれを使用する必要がありますe.target.setAttribute("target", "_blank")

    jQuery(event.target).attr("target", "_blank")

あなたはあなたの正確なユースケースに合うようにそれを作り直す必要があるかもしれませんが、これは私が自分のかゆみを掻く方法です。

ここにあります は、それを操作するためのデモをご紹介します。

(jsfiddleのリンクはこのディスカッションに戻ります。新しいタブは必要ありません:))


1
まあ、それはjqueryを使用していて、window.openポップアップブロッカーの問題を回避するので、私はすべてよりもこの回答を好みます。これは、ターゲットが欠落しているリンクを含むサードパーティのデータを処理する場合に完全に正当です。
IncredibleHat

7

個人的には、単一リンクの場合は次のコードを使用することをお勧めします。それ以外の場合は、同様のコードを使用して関数を作成することをお勧めします。

onclick="this.target='_blank';"

私はW3CのXHTML厳格なテストを回避するためにそれを使い始めました。


1
インラインJavaScriptは、どこでも機能する「非標準」属性を追加するよりも厄介だと思います。
Matti Virkkunen 2013

@MattiVirkkunenは特定の状況ではそれが唯一の解決策です
Claudiu Creanga

1
@Claudiu:このようなばかげた状況に陥った場合は、それを回避するよりも原因を修正する必要があります。
Matti Virkkunen、2015

5

これは、jQueryを使用して行う方法です。新しいウィンドウで開きたいリンクごとにクラスがあります。

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});


1

これは、すべてのページリンク開くのに役立つ場合があります

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

<a href="" class="myClass"></a>クリックした場合と同じように、別のタブへのすべてのリンク項目が開きます。

ブラウザコンソールに貼り付けるだけです。jQueryフレームワークが必要

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.