連結另開新視窗怎麼寫？target=_blank 與 noopener 用法（含 iframe 內連結）

在網頁上點一個連結，預設會在同一個分頁打開新網頁。如果希望開在新的分頁（新視窗），就要在連結加上 target="_blank"。

這篇整理三件事：

1. 另開新視窗的正確寫法，以及為什麼要加 rel="noopener"
2. iframe 裡的連結，怎麼改成另開新視窗或整頁跳轉
3. 什麼情況下不應該另開新視窗

基本寫法

<a href="https://www.example.com/" target="_blank" rel="noopener noreferrer">前往範例網站</a>

• target="_blank"：在新的分頁或視窗開啟。
• rel="noopener"：新開的網頁不能透過 window.opener 回頭控制原本的網頁。
• rel="noreferrer"：瀏覽器不會告訴對方網站「訪客是從哪一頁點過來的」，同時也有 noopener 的效果。

為什麼要加 noopener？

用 target="_blank" 開啟的網頁，以前可以透過 window.opener 存取原本的分頁，甚至把原本的分頁偷偷換成另一個網址。訪客看完新分頁、切回來時，看到的可能已經是一個長得很像的釣魚網頁。這種手法叫做「反向分頁劫持」（reverse tabnabbing）。

加上 rel="noopener"，新分頁的 window.opener 會是 null，就沒辦法這麼做。

現在的主流瀏覽器已經把 target="_blank" 預設當成有 noopener，但明確寫上仍然是好習慣：舊版瀏覽器沒有這個預設行為，程式碼也比較清楚。

noopener 和 noreferrer 要不要一起加？

• 連到外部、不熟悉的網站：noopener noreferrer 一起加，最保險。
• 連到自己的其他網站、合作夥伴：只加 noopener 就好。加了 noreferrer，對方的 Google Analytics 會看不出流量是從你的網站來的，會被算成直接造訪。

WordPress 怎麼設定？

在區塊編輯器選取文字、加上連結後，連結設定裡有「在新分頁中開啟」的開關。打開後 WordPress 會自動在連結加上 target="_blank" 與 rel 屬性，不用自己寫程式碼。

用 JavaScript 開新視窗

按鈕或程式要開新視窗時，window.open 的第三個參數加上 noopener：

window.open('https://www.example.com/', '_blank', 'noopener');

加了 noopener 之後，window.open 會回傳 null，程式不能再操作那個新視窗，這是正常的。

iframe 裡的連結，怎麼另開新視窗？

這是這篇文章舊版要解決的問題：網頁裡用 iframe 嵌入另一個頁面，iframe 裡的連結點下去，新網頁會擠在那個小框框裡打開，而不是另開新視窗或整頁跳轉。

怎麼處理，要看 iframe 裡的頁面是不是你能修改的。

情況一：iframe 裡的頁面你可以修改（最推薦）

在被嵌入頁面的 head 裡加一行 base，整頁的連結預設都會另開新視窗：

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

如果希望的是「整個瀏覽器分頁跳到新網頁」（離開原本的頁面，而不是另開），改成 _top：

<base target="_top">

個別連結如果要不同的行為，直接在那個連結寫 target，就會覆蓋 base 的設定。

情況二：同網域，但不方便修改 iframe 裡的頁面

iframe 裡的頁面跟外層頁面是同一個網域（協定、網域、連接埠都相同）時，外層頁面可以用 JavaScript 替 iframe 裡的頁面加上 base。

舊版文章的程式碼是在載入後把每個連結的 target 一個一個改掉，之後才出現的連結就不會生效。下面的新寫法改成加上 base，動態產生的連結也適用：

<iframe id="news-frame" src="/news/list.html" title="最新消息"></iframe>

<script>
  const newsFrame = document.getElementById('news-frame');

  newsFrame.addEventListener('load', () => {
    const doc = newsFrame.contentDocument; // 跨網域時會是 null
    if (!doc) return;

    const base = doc.createElement('base');
    base.target = '_blank';
    doc.head.appendChild(base);
  });
</script>

• 這段 script 要放在 iframe 的後面。
• iframe 裡每次換頁都會觸發 load，所以換頁之後也會自動加上。
• 如果 iframe 裡的頁面原本就有設定 base 的 target，會以原本的設定為準。

情況三：嵌入的是別人的網站（跨網域）

iframe 裡如果是其他網域的網頁（例如 Google 地圖、YouTube、別家公司的網站），瀏覽器的「同源政策」不允許外層頁面讀取或修改裡面的內容，上面的 JavaScript 會拿不到任何東西。這是瀏覽器的安全限制，沒有辦法繞過。

可以考慮：

• 使用對方提供的官方嵌入碼，連結的開啟方式通常已經處理好。
• 不用 iframe，改成一般連結或按鈕，讓訪客直接到對方網站。

iframe 加了 sandbox 時

sandbox 屬性會限制 iframe 裡能做的事，預設連另開新視窗都不允許。要讓裡面的連結能另開新視窗，要加上 allow-popups；希望新開的視窗不要繼承 sandbox 的限制，再加上 allow-popups-to-escape-sandbox：

<iframe
  src="https://www.example.com/widget.html"
  title="外部小工具"
  sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox">
</iframe>

要讓裡面的連結能讓整個分頁跳轉（_top），則是加上 allow-top-navigation-by-user-activation，只有在使用者點擊時才允許。

什麼時候不該另開新視窗？

另開新視窗不是越多越好。一般的建議是：

適合另開新視窗

• 訪客正在填表單、結帳或看影片，點「說明」「服務條款」時，不希望中斷目前的進度。
• 連結是 PDF 或其他檔案，看完關掉就能回到原本的網頁。
• 連到外部網站，而且希望訪客看完還會回來（這點見仁見智）。

不建議另開新視窗

• 站內連結：同一個網站裡的頁面互相連結，用同一個分頁就好。訪客想另開的話，可以自己按住 Ctrl（Mac 是 Command）點擊，或用滑鼠中鍵。
• 手機上：另開的分頁不容易察覺，訪客可能不知道自己換了分頁，分頁也越開越多。
• 導覽選單、按鈕：每點一次就多一個分頁，很快就開了一堆。

記得告訴訪客

另開新視窗的連結，最好在文字或圖示上提示，例如「服務條款（另開新視窗）」，或加一個外部連結的小圖示。對使用螢幕報讀軟體的訪客來說，突然換到新分頁容易迷路，事先告知是無障礙設計的基本建議。

常見問題

加了 target="_blank" 還是在同一頁開啟？

• 檢查是不是有 JavaScript（例如主題或外掛的程式）攔截了連結的點擊。
• 連結在 iframe 裡的話，檢查 iframe 是不是有 sandbox 屬性卻沒加 allow-popups。
• 在 LINE、Facebook 這類 App 裡打開網頁時，App 內建的瀏覽器有時會把新分頁開在同一個畫面，這是 App 的行為，網頁端無法控制。

延伸閱讀

• iframe 嵌入網頁語法：基本寫法、RWD 自適應寬度與網頁無法嵌入的原因
• iframe 自動適應高度怎麼做？同網域與跨網域的寫法（含 postMessage 範例）
• HTML 錨點連結教學：用 id 跳到指定位置、平滑捲動與固定頁首遮擋的解法

連結怎麼開、開在哪裡看起來是小事，卻會直接影響訪客逛網站的感受。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與 RWD 響應式網站，歡迎來聊聊。