location.origin详解

一、location.origin用法

location.origin是一个只读属性，返回当前文档所在的协议、主机名和端口号，常用于获取当前页面的URL的前缀。

console.log(location.origin); 
// 输出：https://www.example.com （假设当前页面的URL为https://www.example.com/path/to/page）

在前端开发中，location.origin常常用于做跨域请求的判断和处理。

二、location.origin mdn

MDN是一个权威的Web前端开发文档网站，其中包含了关于Web开发各种技术的详细文档和示例，location.origin的MDN文档对于深入了解和使用location.origin非常有帮助。

MDN的location.origin文档地址为：https://developer.mozilla.org/zh-CN/docs/Web/API/Location/origin

三、location.origin是什么

location.origin其实是由两个属性组成，它们分别是location.protocol和location.host。

location.protocol返回页面所使用的协议，例如http或https。

location.host返回主机名和端口号，例如www.example.com:8080。

console.log(location.protocol); 
// 输出：https

console.log(location.host); 
// 输出：www.example.com:8080

location.origin将以上两个属性结合起来，返回当前页面URL的前缀。

四、location.origin浏览器兼容

location.origin是HTML5中新增的属性，在部分比较老的浏览器中可能不被支持，常见的兼容性问题为“undefined”。为此，可以通过以下代码进行先检测后使用：

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

console.log(window.location.origin);

以上代码判断window.location.origin是否为undefined，如果是，则手动将window.location.origin设置为当前页面URL的前缀。

五、location.origin可以获得哪些信息

通过location.origin可以获得如下信息：

同时，在前端开发中，location.origin也常常用于跨域请求的判断和处理。