2015-04-04 231 views
12

this website上,手風琴頂部導航包含名爲「基礎」的元素:(screenshot)鏈接與目標=「_ blank」未在Chrome的新標籤中打開

此元素HTML代碼生成:

<a href="http://www.foracure.org.au" target="_blank" style="width: 105px;"></a> 

然而,在Chrome中,當你點擊這個元素,新的網站沒有在新標籤中打開。

你能告訴我爲什麼嗎?謝謝。

+0

工作對我來說,目標在新標籤打開。 – arkascha 2015-04-04 08:03:57

+0

謝謝@arkascha。我編輯了問題,指出Chrome中出現問題。 – Steve 2015-04-04 08:14:22

+0

我正在使用鉻瀏覽器。適用於我。所以顯然這是谷歌Chrome版Chrome瀏覽器增加的效果。 – arkascha 2015-04-04 08:17:19

回答

0

您的目標屬性語法是正確的,但瀏覽器不需要遵守它。他們可能會將其解釋爲在新標籤中打開目的地而不是新窗口,或者他們可能會完全忽略該屬性。瀏覽器有這些問題的設置。此外,可以通過瀏覽器插件阻止打開新窗口(通常旨在防止惱人的廣告)。

對於作爲作者,您幾乎無法做到這一點。您可以考慮使用JavaScript來打開一個新窗口,參見參考資料。到目標=「_ blank」的接受答案在Firefox中不起作用,但瀏覽器可能更不願意讓頁面通過目標打開新窗口。

target="_blank" is not working in firefox?

8

因爲JavaScript正在處理click事件。當您單擊,下面的代碼被稱爲:

el.addEvent('click', function(e){ 
    if(obj.options.onOpen){ 
     new Event(e).stop(); 
     if(obj.options.open == i){ 
      obj.options.open = null; 
      obj.options.onClose(this.href, i); 
     }else{ 
      obj.options.open = i; 
      obj.options.onOpen(this.href, i); 
     } 
    }  
}) 

onOpen手動更改location

編輯:關於你的評論 如果你可以修改ImageMenu.js,你可以更新它調用onClose傳遞a元素對象的腳本(this,而不是this.href

obj.options.onClose(this, i); 

然後更新ImageMenu實例,具有以下onOpen變化:

window.addEvent('domready', function(){ 
    var myMenu = new ImageMenu($$('#imageMenu a'), { 
     openWidth: 310, 
     border: 2, 
     onOpen: function(e, i) { 
      if (e.target === '_blank') { 
       window.open(e.href);  
      } else { 
       location = e.href; 
      } 
     } 
    }); 
}); 

這將檢查的元素的目標屬性看看它是否爲_blank,然後打電話window.open,如果找到。

如果您不想修改ImageMenu.js,另一個選擇是修改您的鏈接以在您的onOpen處理程序中標識它們。這樣說:

<a href="http://www.foracure.org.au/#_b=1" target="_blank" style="width: 105px;"></a> 

然後更新您的onOpen呼籲:

onOpen: function(e, i) { 
    if (e.indexOf('_b=1') > -1) { 
     window.open(e); 
    } else { 
     location = e; 
    } 
} 

唯一的缺點,這是用戶看到懸停的哈希值。

最後,如果您打算在新窗口中打開的鏈接數量較少,則可以創建一個映射並進行檢查。例如:

var linksThatOpenInANewWindow = { 
    'http://www.foracure.org.au': 1 
}; 

onOpen: function(e, i) { 
    if (linksThatOpenInANewWindow[e] === 1) { 
     window.open(e); 
    } else { 
     location = e 
    } 
} 

唯一的缺點是維護,這取決於鏈接的數量....

也有人建議修改鏈接(使用#javascript:),並添加一個內聯事件處理程序(onclick) - 我不建議在所有因爲它打破鏈接時,JS是禁用/不支持。

祝你好運!

+0

謝謝傑克。是否可以編輯此JavaScript以在新標籤中打開鏈接?如果是這樣,怎麼樣? – Steve 2015-04-04 08:12:49

+1

嘿@Steve - 我編輯了我的答案,包括一些變通方法。希望他們幫助! :) – Jack 2015-04-04 20:12:24

7
Replace 

<a href="http://www.foracure.org.au" target="_blank"></a>  

with 

<a href="#" onclick='window.open("http://www.foracure.org.au");return false;'></a> 

在您的代碼中,並將在Chrome和其他瀏覽器中工作。

感謝 阿努拉格

+1

這將工作。然而正如傑克所說,如果JavaScript不被支持,這將會中斷。 MDN建議不要使用這個,並給出幾個原因。希望這有助於:https://developer.mozilla.org/en-US/docs/Web/API/Window/open#Never_use_this_form_of_code_for_links_%3Ca_hrefjavascriptwindow.open(...)_...%3E – sdw 2017-07-08 05:49:19

+0

這不是一個好替換,因爲這可能會阻止對這些鏈接的抓取 – maverick 2017-11-11 08:21:39

3

出於某種原因,它不工作,所以我們可以通過另一種方式

這樣做只是刪除線和補充一點: -

<a onclick="window.open ('http://www.foracure.org.au', ''); return false" href="javascript:void(0);"></a> 

好運。

-2

如果使用陣營這應該工作:如預期

<a href="#" onClick={()=>window.open("https://...")}</a>

+2

OP正在詢問鏈接元素的target =「_ blank」設置的行爲。介紹React(或任何Javascript)與問題無關。 – hraynaud 2017-08-23 17:19:43