2016-11-10 41 views
1

最初のタブのリンクをクリックして新しいタブを開いたときに現在開いているタブを更新することはできますか? 基本的に、最終結果は次のようになります:最初のタブが開いていて、最初のタブで開いているページ上のリンクがクリックされています(中マウスのボタンまたは同様のもので、タブ)では、クリックされたリンクが第2タブで開き、第1タブが自動的にリフレッシュされます。私はそれを分かりやすく説明することを願っています。注:自分のウェブサイトをデザインしているわけではありません。私はGreasemonkeyでウェブサイトのプラグインを作成しようとしています。新しいタブが開いているときに現在開いているタブをJavascriptで更新する

答えて

1

は、あなたがあなたのページにこのリンクを持っていると仮定しましょう:JSスクリプトで

<a href="http://server.com/url-to-second-tab" target="_new">Link which opens new tab and refreshes current one</a> 

これを追加(あなたが述べたように、あなたはjQueryのを使用していると仮定します):

$(document).ready(function(){ 
    $('body').on('click','a',function(e){ 
     e.preventDefault() 
     // Open new tab - in old browsers, it opens a popup window 
     window.open($(this).attr('href'), '_blank'); 
     // reload current page 
     location.reload(); 
    }) 
}) 

すべてのブラウザでそれをテストしてくださいいくつかのブラウザでは、新しいタブの代わりにポップアップウィンドウとしてリンクを開くことがあります。速い試験として

、クロムのF12開発者ツールを使用してオープンし、コンソールに書き込み:

window.open('https://google.com', '_blank');location.reload(); 
+1

働いている唯一の人だと思われます。ありがとうございます:) –

0

はい、document.bodyメソッドを使用しています。

w = window.open("yourUrl", "MYtest", "width=700, height=500"); 

をそして、あなたの機能であなたはdocument.bodyメソッドでアクセスすることができます:

あなたの窓を宣言

html = "I Append my new html"; 
$(w.document.body).html(html); 
+0

私は十分にそれを説明しなかったと思います。これは、私が意味するものをより良く示すはずです:http://i.imgur.com/6BPPVOY.png –

+0

あなたが欲しいものを理解することは大変申し訳ありません。詳細を追加してください。おそらく最高の写真。 –

0

あなたはこのようなものが必要(内部のjqueryのコード):

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Title</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
</head> 
<body> 
    <a id="myLink" href="http://www.google.com">Click me</a> 
    <div id="toUpdate">Not updated</div> 
</body> 

<script> 
$(function() { 
    $("#myLink").on("click", function(event) { 
     event.preventDefault(); 
     window.open(event.target.href, '_blank'); 
     $("#toUpdate").text("Go on google"); 
    }).on("mousedown", function(event) { 
     event.preventDefault(); 
     if (event.which === 2) 
      $("#toUpdate").text("Go on google"); 
    }); 
}); 
</script> 
</html> 

Firefoxサポートを追加編集しました

関連する問題