JavaScript >> Javascript 文檔 >  >> Tags >> URL

在 JavaScript 中單擊按鈕時在新選項卡或窗口中打開 URL

在 JavaScript 中,您可以使用 window.open() 單擊按鈕時在新選項卡中打開 URL 的方法。它會根據瀏覽器設置和傳遞的參數打開一個新選項卡或一個新瀏覽器窗口。

以下是它的工作原理:

  1. 使用 querySelector() 選擇按鈕元素 方法。
  2. 為按鈕添加事件監聽器。
  3. 在事件處理程序中,使用 window.open() 在新標籤頁中打開鏈接的方法。

在新標籤頁中打開網址

要打開新標籤,請傳遞 _blank 作為 window.open() 的第二個參數 或者完全跳過第二個參數,只傳遞 URL。假設您有以下 <button> 在您的網頁上的某處標記:

<button id="clickMe">Click Me!</button>

您要確保當用戶單擊上述按鈕時,會在新選項卡中打開一個 URL。以下是您可以在 vanilla JavaScript 中執行此操作的方法:

const button = document.querySelector('#clickMe');

// add click event listener
button.addEventListener('click', () => {

    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');

});

上面的 JavaScript 代碼將打開 https://attacomsian.com 根據瀏覽器設置在新選項卡(或窗口)中。

異步 HTTP 請求

在使用 window.open() 之前你應該知道的另一件事 方法。新選項卡或窗口僅作為直接結果打開 的用戶操作。在上面的示例中,URL 是在實際的點擊事件中打開的。

但是,如果您發出 異步 HTTP 請求 當用戶點擊並成功打開新標籤頁中的 URL 時,瀏覽器將阻止彈出窗口 因為它不是直接的用戶操作。

這是一個使用 Fetch API 進行 AJAX 調用的示例,然後在成功響應時打開一個新選項卡:

button.addEventListener('click', () => {

    // make an API call
    fetch('https://reqres.in/api/users')
        .then(res => res.json())
        .then(json => {
            
            // fail in Chrome - popup blocked
            const tab = window.open('https://attacomsian.com', '_blank');
        });        
});

為了使上面的代碼工作,我們需要做一些改變。您應該做的第一件事是打開一個空的新窗口 點擊。請求完成後,更新實際的窗口 URL 並設置焦點。如果請求失敗,只需使用 window.close() 關閉窗口 方法。

以下是適用於所有瀏覽器的完整示例:

button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('https://reqres.in/api/users')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});

在新窗口中打開網址

要在新窗口中打開 URL,請確保第二個參數是 name 窗口或空的。您還可以使用 features 指定窗口的高度和寬度 屬性如下例所示:

button.addEventListener('click', () => {

    // open a new window
    const win = window.open('https://attacomsian.com', 'mysite',
    'width=600,height=500');
});

Tutorial JavaScript 教程
  1. MarkerCluster 標記仍在集群後面顯示

  2. 5 個你不知道的有用的 VSCode 擴展

  3. 使用 VueJS 3 的字體真棒

  4. 慣性

  5. Vue.js 組件道具

  6. 使用 JavaScript 進行 SaaS 應用程序開發

  7. React 最佳實踐——在 2022 年編寫更好的 React 代碼的技巧

  1. 深入了解節點模塊:fs

  2. react和axios中常見的錯誤頁面如何處理?

  3. Array.every() - 用於檢查所有項目是否滿足條件

  4. 柯里化的用處

  5. 將不帶空格的文本拆分為 Node.js 中的單詞列表

  6. 為什麼帶有全局標誌的 RegExp 會給出錯誤的結果?

  7. 有人知道為什麼我的距離上面的線這麼遠嗎? [關閉]

  1. 在 60 分鐘內創建個性化區塊鏈

  2. 在 React 中製作自己的卡片輪播

  3. JavaScript 檢查是否未定義 |示例代碼

  4. Discord.js 'presenceUpdate' 未被調用