在 JavaScript 中使用 Onclick 轉到 URL

Shraddha Paghdar 2023年10月12日
  1. 在 JavaScript 中使用 window.open() 轉到 URL
  2. 在 JavaScript 中使用 window.location 轉到 URL
在 JavaScript 中使用 Onclick 轉到 URL

window 物件是用於與瀏覽器對話的最重要的物件之一。它代表瀏覽器的視窗。所有的全域性變數、函式都成為 window 物件的成員。視窗的位置物件用於獲取當前頁面的 URL 以及更改重定向的 URL。

在今天的文章中,我們將學習如何在 JavaScript 中使用 onclick 訪問 URL。

JavaScript window 物件提供了兩種方式,第一種是使用 location 屬性,第二種是使用 open() 方法。

在 JavaScript 中使用 window.open() 轉到 URL

它是 JavaScript 提供的一種 Window 介面方法,它將指定的 URL/資源載入到具有指定名稱的新標籤頁或現有瀏覽器中。此方法將生成一個用於開啟指定 URL 的新視窗。每次 window.open() 方法返回它都包含 about:blank。當前指令碼塊完成執行後,將載入實際 URL。

JavaScript 中 window.open() 的語法

window.open(url, windowName, windowFeatures);

引數

  • url:這是一個強制引數,它接受有效的 URL、影象路徑或瀏覽器支援的其他資源。如果傳遞空字串,它將開啟一個帶有空白 URL 的新標籤頁。
  • windowName:它是一個可選引數,它指定瀏覽上下文的名稱。這不定義視窗的標題。此外,此視窗名稱不應包含任何空格。
  • windowFeatures:這是一個可選引數。此引數接受新標籤頁的逗號分隔視窗屬性,形式為 name=value,如果屬性是布林值,則僅接受 name。一些特性是視窗物件的預設位置和大小。

示例程式碼:

<button type="button" id="btn" onclick="openGoogleByMethod()">Open Google</button>
window.open('https://www.google.com');

在 JavaScript 中使用 window.location 轉到 URL

它是 window.location 的只讀屬性,返回 Location 物件。此物件包含有關文件當前位置的資訊。位置物件還包含其他屬性,如 hrefprotocolhosthostnameport 等。

window.location 的屬性也可以使用 location 直接訪問,因為 window 物件始終保留在作用域鏈的頂部。使用者可以使用 href 屬性或 assign Location 物件的方法來載入/開啟其他 URL/資源。

語法

window.location = URL_PATH;
window.location.href = URL_PATH;
window.location.assign(URL_PATH);

引數

  • URL_PATH:這是一個強制引數,接受需要開啟的有效 URL。此 URL 可以是絕對 URL、相對 URL、錨 URL 或新協議。

示例程式碼:

<button type="button" id="btn" onclick="openGoogle()">Open Google</button>
window.location = 'https://www.google.com';
window.location.href = 'https://www.google.com';
Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn