Mastering JS Location: Origin – A Comprehensive Guide from Basic Usage to Browser Compatibility

掌握JS Location: Origin的全面指南 – 從基本用法到瀏覽器相容性

JavaScript (JS) 中的 Location 物件是一個重要的元素，負責提供關於當前文檔的位置資訊。而 Location 物件的 origin 屬性，更是我們在操作網頁資訊時不可或缺的工具。本篇文章，將引領您瞭解 location.origin 的基本用法，並講解如何檢查此特性在不同瀏覽器的相容性。

The Location object in JavaScript (JS) is an essential element that provides information about the current document’s location. The origin property of the Location object is an indispensable tool when manipulating web page information. This article will guide you to understand the basic usage of location.origin and explain how to check the compatibility of this feature in different browsers.

JavaScript Location: Origin的基本用法 / Basic Usage of JavaScript Location: Origin

在 JavaScript 中，location.origin 回傳一個字符串，包含了網頁的協議名、主機名和（如果有的話）端口號。其基本格式為：protocol://host:port。

In JavaScript, location.origin returns a string that includes the protocol, host, and (if available) port of the web page. Its basic format is: protocol://host:port.

console.log(location.origin);
// 輸出範例："https://www.example.com:8080"
// Output example: "https://www.example.com:8080"

在上述的例子中， https:// 是協議名，www.example.com 是主機名，而 8080 是端口號。注意，若是使用預設的HTTP或HTTPS協議端口，則 :port 部分將不會顯示。

In the example above, https:// is the protocol, www.example.com is the host, and 8080 is the port. Note that if the default HTTP or HTTPS protocol port is used, the :port part will not be displayed.

檢查瀏覽器相容性 / Checking Browser Compatibility

要檢查 location.origin 在不同瀏覽器的相容性，您可以參考Can I use網站，這裡提供了最新和最全面的瀏覽器支援資訊。

To check the compatibility of location.origin in different browsers, you can refer to the Can I use website, which provides the most recent and comprehensive browser support information.

另外，如果你想要在JavaScript程式碼中進行檢查，你可以使用下面的程式碼片段：

Additionally, if you want to check within your JavaScript code, you can use the following code snippet:

if (!window.location.origin) {
  window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

以上程式碼會檢查 window.location.origin 是否存在。若不存在，則會建立一個新的 origin 屬性，並根據當前的協議、主機名和端口號來設定其值。

The above code checks whether window.location.origin exists. If it does not exist, it will create a new origin property and set its value according to the current protocol, hostname, and port.

希望這篇文章能幫助你更深入理解和運用JavaScript中的 location.origin，進一步提升你的網頁開發技能。更多相關文章，請持續關注本站！

I hope this article can help you understand and use location.origin in JavaScript more deeply, further improving your web development skills. For more related articles, please stay tuned to this site!

tags (中文)：JavaScript教學, Location物件, origin屬性, 瀏覽器相容性, 網頁開發, 程式碼範例, JS基礎, 前端開發, JS Location, web protocol

tags (English)：JavaScript Tutorial,Location Object, Origin Property, Browser Compatibility, Web Development, Code Example, JS Basics, Front-End Development, JS Location, Web Protocol