JavaScript 點擊按鈕無法開啟新視窗？常見衝突與解決辦法

新手在撰寫「點擊按鈕開啟新視窗」功能時，常遇到按鈕點擊無反應、被瀏覽器攔截、或函式名稱衝突等問題。以下整理典型錯誤與修正示範。

常見錯誤原因

1. 函式名稱與原生 API 衝突：命名為 open、select、submit 等會覆蓋 window.open 或表單原生方法。
2. 瀏覽器彈出視窗攔截器：非使用者直接觸發（如 setTimeout、AJAX 回呼中呼叫 window.open）會被攔截。
3. 語法錯誤：引號未閉合、參數格式錯誤、大小寫不一致。
4. 事件綁定方式錯誤：內聯 onclick 與 addEventListener 混用導致覆蓋。

錯誤示範（函式名稱衝突）

<script>
  function select() { // ❌ 與 document.select / window.select 衝突
    window.open('https://example.com', '_blank');
  }
</script>
<button onclick="select()">開啟</button>

正確寫法

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>開啟新視窗範例</title>
  <script>
    // ✅ 使用具體、不衝突的函式名稱
    function openDialog() {
      // 參數：URL、目標、特徵字串（寬高等）
      window.open('https://www.baidu.com', '_blank', 'width=500,height=400,menubar=no,toolbar=no');
    }
  </script>
</head>
<body>
  編號<input type="text" id="id1"><br>
  姓名<input type="text" id="id2"><br>
  <input type="button" value="選擇" onclick="openDialog()">
</body>
</html>

進階：動態傳遞參數開啟視窗

<script>
  function openCustomUrl(url, w, h) {
    const left = (screen.width - w) / 2;
    const top = (screen.height - h) / 2;
    const features = `width=${w},height=${h},left=${left},top=${top},resizable=yes,scrollbars=yes`;
    window.open(url, '_blank', features);
  }
</script>
<button onclick="openCustomUrl('https://google.com', 800, 600)">開啟 Google</button>

被攔截時的替代方案

• 目標連結改為 <a target="_blank">：使用者主動點擊連結不會被攔截。
• 同頁面模態框：用 div 疊加層模擬視窗，避開攔截器。
• 引導使用者允許彈出視窗：提示點擊瀏覽器網址列圖示解除攔截。

除錯檢查清單

1. 開啟開發者工具 Console，查看是否有紅字報錯。
2. 在 Console 直接輸入 window.open('https://example.com') 測試是否被攔截。
3. 確認函式名稱未與 window、document、表單元素的原生屬性/方法重名。
4. 檢查 onclick 內的字串引號是否正確跳脫。

只要避開命名衝突、確保在使用者點擊事件中直接呼叫 window.open，即可可靠開啟新視窗。