jq怎么准确获取页面完整域名？，有哪些实用技巧

在jQuery里获取当前页面的完整域名，核心方案是读取window.location对象用location.href拿完整网址，用location.host拿域名加端口，用location.protocol + '//' + location.host组合出带协议的完整域名。 这个问题的难点不在jQuery本身有多复杂，而是要先搞明白”完整域名”在不同场景里到底指什么。

jq怎么写获取当前网址的完整域名

先说结论：jQuery没有专门封装的”获取域名”方法，依赖的是原生JavaScript的window.location，很多刚接触前端的同学会以为$(location).attr('host')这种写法可行，实际上jQuery对location对象的封装非常有限,直接用原生属性是最稳的方式。

加载中

【教程】领取免费域名，还能接入Cloudflare！？？

小宇Boi

5.8万2323123

原视频地址

// 完整地址，含协议、域名、端口、路径、参数
var fullUrl = window.location.href;
// 域名+端口，不含协议，如 www.example.com:8080
var host = window.location.host;
// 协议+域名+端口，不含路径，如 https://www.example.com:8080
var origin = window.location.protocol + '//' + window.location.host;
// 纯域名，不含端口，如 www.example.com
var hostName = window.location.hostname;

先分清你想要的”完整域名”是哪种

这个坑我在实际项目里踩过不止一次，你跟后端联调时说”给我完整域名”，对方给你的可能是https://www.example.com，也可能是https://www.example.com/path/to/page，甚至可能是www.example.com这种没协议头的,不同含义对应的代码完全不同。

要完整的URL地址
页面地址是https://www.example.com/user/profile?tab=orders，你想完整拿下来，用location.href就行，协议、域名、路径、参数全都有。

只要协议+域名
比如做API请求前缀拼接，用location.protocol + '//' + location.host，为什么不用location.origin？因为location.origin在IE浏览器里不支持，很多老旧管理系统还在要求兼容IE11,用拼接的方式更保险。

只要域名，不要协议和端口
做域名白名单校验或者统计上报时常用，用location.hostname。

jquery location.href和location.host的区别

这两兄弟是新手最容易搞混的，我用一个实际地址举例：https://www.example.com:8080/product/detail?id=1001。

jq获取域名去掉http的写法

这个需求出现的频率挺高做登录跳转时需要带上当前来源域名，但登录页只认host,不认协议和路径。

// 去掉协议和路径，只留域名
var pureDomain = window.location.host;
// 遇到开发环境是 http://localhost:3000 这种，也要把端口拿掉
var pureHostName = window.location.hostname;

注意一个常见失误：location.host在本地开发时会带上端口号，比如localhost:3000，如果你的生产环境是80端口，写进白名单的域名是www.example.com，但开发环境里location.host返回的是localhost:3000，直接拿去匹配白名单就会失败，这时候需要判断一下端口是否为默认端口，或者干脆用hostname。

域名带端口号时的拼接技巧

拿到host之后要拼接口地址,通常有两种做法：

// 方案一：直接拼host
var apiBase = location.protocol + '//' + location.host + '/api/v1';
// 方案二：用模板字符串
var apiBase = `${location.protocol}//${location.host}/api/v1`;

行业共识认为，第二种写法更易读，而且不容易漏掉双斜杠，这个细节看起来小，但真的有人在写location.protocol + location.host时忘记补，结果拼出来是https:www.example.com,排查半天才发现问题。

实际项目里jq获取完整域名的常见场景

本地开发环境与线上环境切换

很多团队是这么玩的：前端本地跑在http://localhost:8080，测试环境是http://test.example.com，生产环境是https://www.example.com，API地址的baseURL需要动态获取,如果写死就会导致环境切换时还要改代码。

// 根据当前域名动态判断环境
var currentHost = window.location.hostname;
var isLocal = currentHost.indexOf('localhost') !== -1 || currentHost === '127.0.0.1';
// 多域名适配：用当前页面域名拼接口地址
var requestBase = location.protocol + '//' + location.host + '/api';

这种写法在国内服务器域名配置不一致的场景下特别实用小程序H5项目、企业官网多域名部署、百度统计代码在不同子域名下上报,都需要拿到当前页面的完整域名来决定请求发往哪里。

多域名跳转时的来源记录

电商网站经常有多个域名对应同一套系统，用户在www.example.com浏览商品，下单页在checkout.example.com，下单成功后的回调页面需要记录用户从哪个域名过来，直接把location.host存进cookie或者localStorage就行。

// 记录来源域名
localStorage.setItem('source_domain', window.location.host);
// 跳转时带上来源参数
var jumpUrl = 'https://checkout.example.com/pay?from=' + encodeURIComponent(window.location.host);

百度统计代码里上报当前完整域名

做流量分析时，经常需要给统计脚本传当前页面域名作为自定义参数，虽然百度统计自带域名识别，但有些场景需要把”完整域名+路径”作为事件标签上报，就需要用location.href来取。

// 上报当前页面完整地址
var pageUrl = window.location.href;
// 假如页面有SPA路由，location.href能拿到问号后面的参数
// 但拿不到#后面的hash值，这个要注意

这个细节容易踩坑：location.href不包含URL中的锚点部分，单页应用用hash路由时，如果页面地址是https://www.example.com/#/user/123，location.href返回的是https://www.example.com/，后面跟的hash内容需要另外用location.hash获取。

iframe嵌套页面的域名获取陷阱

如果页面被嵌在iframe里，window.location获取的是当前iframe文档自己的域名，不是外层页面的域名，跨域场景下，外层页面拿不到内层iframe的location.href,会报安全错误。

// 在iframe内部获取自己的域名
var iframeHost = window.location.host;
// 想获取父页面的域名，可能报错
// var parentHost = window.parent.location.host; // 跨域时抛异常

处理这种场景的方法是：父页面通过postMessage把域名传给iframe，iframe监听消息拿到父级域名，或者在后端配置document.domain降级,但只适用于同主域场景。

价格敏感型场景：云服务器和CDN配置

这个场景跟jq关系不大，但查域名信息经常会顺手要做GEO配置，比如你买了国内某个云服务商的服务器，备案完成后需要把域名解析到服务器IP，解析配置页会让你填主机记录和记录值，这里的”主机记录”本质上就是你页面里

location.hostname对应部分，做CDN加速时，回源地址也经常要填完整域名。建议在本地写好一个测试页，把location.href、location.host、location.hostname全部显示出来,这样排查配置问题会直观得多。

jq获取完整域名的兼容性说明

这块直接说结论：

• window.location.href、host、hostname、protocol在所有浏览器都支持，包括IE6之后的全部版本,不用担心兼容问题。
• location.origin在IE中不支持,不要在生产环境的jQuery项目里直接用。
• jQuery封装了$(location).attr('href')这种写法，但实测性能和可读性都无优势,不如直接用原生属性。

// 工作中推荐这样写
var siteUrl = window.location.href;
// 不推荐
var siteUrl = $(location).attr('href');

常见问题解答

jq获取当前域名不带端口怎么写？

用window.location.hostname，它返回纯域名，比如www.example.com，不含协议、端口和路径，如果网页在http://localhost:3000运行，返回值是localhost，需要注意的坑是：hostname是全局对象下的原生属性，不需要引入任何jQuery插件。

jquery拿到完整域名后怎么获取域名后缀？

比如想从https://www.example.com.cn/path中提取.com.cn后缀，不能简单地用split('.')截取最后两段，因为不同域名的后缀长度不一样，比较靠谱的做法是先用hostname拿到纯域名，再用正则匹配已知后缀列表,或者按切分后从右往左匹配公共后缀。

用jQuery获取的完整域名和PHP获取的域名结果不一致？

大概率是端口号导致的差异。location.host会包含端口（如www.example.com:8080），而PHP的$_SERVER['HTTP_HOST']同样包含端口，$_SERVER['SERVER_NAME']不包含，前端后端取值口径不同就会出现对不上，统一用hostname或者统一取出端口再处理,就能对齐。

最后强调一遍：jq获取当前页面的完整域名，本质上是原生window.location对象的读取操作。 先想清楚你要的是href、host还是hostname，兼容性上没有额外负担，直接写就行，下次再遇到”给我完整的域名地址”这种需求，按场景拆分处理,基本不会出错。