在新視窗開啟連結的方法是什麼？那怎麼設定全站連結都在新視窗開啟？

王铁柱6發表於2024-11-24

在新視窗開啟連結有幾種前端開發方法：

1. 使用target="_blank"屬性:

這是最常見和最簡單的方法。 在<a>標籤中新增target="_blank"屬性即可。

<a href="https://www.example.com" target="_blank">在新視窗開啟連結</a>

2. JavaScript window.open()方法:

這種方法更加靈活，可以控制新視窗的各種屬性，例如大小、位置等。

<a href="#" onclick="window.open('https://www.example.com', '_blank'); return false;">在新視窗開啟連結</a>

// 或者使用addEventListener：
const link = document.getElementById('myLink');
link.addEventListener('click', (event) => {
  event.preventDefault(); // 阻止預設行為
  window.open('https://www.example.com', '_blank');
});

<a href="https://www.example.com" id="myLink">在新視窗開啟連結</a>

安全性考慮 - rel="noopener noreferrer":

當使用target="_blank"時，新視窗可以透過window.opener訪問原始視窗的物件。這可能存在安全風險。為了避免這種情況，建議同時新增rel="noopener noreferrer"屬性。

<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">在新視窗開啟連結</a>
  • rel="noopener": 防止新視窗透過 window.opener 訪問原始視窗。
  • rel="noreferrer": 防止新視窗透過 window.opener.location 更改原始視窗的 URL，這是一種釣魚攻擊的常見手段。

設定全站連結都在新視窗開啟:

有幾種方法可以實現全站連結在新視窗開啟：

1. JavaScript修改所有連結:

document.querySelectorAll('a[href^="http"]').forEach(link => {
  link.target = '_blank';
  link.rel = 'noopener noreferrer'; //  安全起見，新增noopener noreferrer
});

這段程式碼會選擇所有href屬性以http開頭的<a>標籤，並設定它們的target和rel屬性。 注意，這隻會影響頁面載入後已經存在的連結，對於動態新增的連結需要額外的處理。

2. <base>標籤:

在<head>標籤中新增<base target="_blank">可以為所有連結設定預設的target屬性。

<head>
  <base target="_blank">
</head>

這種方法簡單，但會影響所有連結，包括站內連結，可能不是最佳選擇。

3. 後端修改:

如果可以修改後端程式碼，可以在生成HTML時直接為所有外部連結新增target="_blank" 和 rel="noopener noreferrer"屬性。這是最推薦的做法，因為它可以確保所有連結都得到正確的處理。

選擇哪種方法？

  • 對於單個連結，使用target="_blank" rel="noopener noreferrer"是最簡單和推薦的方法。
  • 對於全站連結，如果可以修改後端，則在後端新增屬性是最佳選擇。 如果只能透過前端實現，則需要根據具體情況選擇JavaScript或<base>標籤，並仔細考慮對站內連結的影響。 JavaScript方法更靈活，可以根據需要對不同型別的連結進行不同的處理。

記住，過度使用新視窗開啟連結可能會影響使用者體驗，因此請謹慎使用，並根據具體情況進行選擇。

相關文章