js如何获取当前网站的协议、域名、端口号

 更新时间:2025年01月24日 08:57:11   作者:小嘟嚷ovo  
文章介绍了如何使用JavaScript的window.location对象获取当前网站的协议、域名、端口号,并提供了示例代码,此外,还介绍了如何将这些部分组合成一个完整的URL

js获取当前网站的协议、域名、端口号

在JavaScript中,你可以通过window.location对象来获取当前网站的URL信息,包括协议(protocol)、域名(hostname)、端口号(port)等。

以下是如何分别获取这些信息的示例:

1. 获取协议(Protocol)

协议部分可以通过window.location.protocol获取,这将返回包括冒号(:)的协议名称,例如http:或https:。

var protocol = window.location.protocol;
console.log(protocol); // 输出:http: 或 https:

2. 获取域名(Hostname)

域名部分可以通过window.location.hostname获取,这将返回不包括端口号的域名。

var hostname = window.location.hostname;
console.log(hostname); // 输出:例如 example.com

3. 获取端口号(Port)

端口号可以通过window.location.port获取。

如果URL中未明确指定端口号,并且协议是http,则端口号默认为80;如果协议是https,则端口号默认为443。

然而,window.location.port在这些情况下将不会返回默认值,而是返回空字符串""。

var port = window.location.port;
console.log(port); // 输出:例如 8080 或 ""(如果未指定且为默认端口)

示例:组合URL部分

如果你想要将协议、域名和端口号(如果非默认)组合起来,你可以这样做:

var protocol = window.location.protocol;
var hostname = window.location.hostname;
var port = window.location.port ? ':' + window.location.port : ''; // 如果端口号不是默认,则添加':'和端口号
var baseUrl = protocol + '//' + hostname + port;
console.log(baseUrl); // 输出:例如 https://example.com:8080 或 http://example.com

请注意:

  • 这个组合假设你想要一个可以用于构造新URL的基础URL。
  • 如果你的目标是检查或分析当前页面的URL,则直接访问window.location的各个属性通常就足够了。

4. 获取协议域名端口号一起(Origin)

端口号可以通过window.location.origin获取。

var origin = window.location.origin;
console.log(origin); // 输出:https://example.com:8080

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • JavaScript中创建字典对象(dictionary)实例

    JavaScript中创建字典对象(dictionary)实例

    这篇文章主要介绍了JavaScript中创建字典对象(dictionary)实例,本文直接给出了实现的源码,并给出了使用示例,需要的朋友可以参考下
    2015-03-03
  • js实现数据双向绑定(访问器监听)

    js实现数据双向绑定(访问器监听)

    这篇文章主要为大家详细介绍了采用访问器监听的方式实现简单数据双向绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JS中将blob返回值转换为json格式的问题小结

    JS中将blob返回值转换为json格式的问题小结

    这篇文章主要介绍了JS中如何将blob返回值转换为json格式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-12-12
  • javascript中普通函数的使用介绍

    javascript中普通函数的使用介绍

    本文为大家介绍下javascript中普通函数的使用,下面有个不错的示例,感兴趣的朋友可以参考下
    2013-12-12
  • ES6 Object属性新的写法实例小结

    ES6 Object属性新的写法实例小结

    这篇文章主要介绍了ES6 Object属性新的写法,结合实例形式总结分析了ES6中object属性的常见简化写法,需要的朋友可以参考下
    2019-06-06
  • js判断浏览器是否支持html5

    js判断浏览器是否支持html5

    这篇文章主要介绍了如何使用js判断浏览器是否支持html5,需要的朋友可以参考下
    2014-08-08
  • JS去除字符串两端空格的简单实例

    JS去除字符串两端空格的简单实例

    本篇文章主要是对JS去除字符串两端空格的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 手机端点击图片放大特效PhotoSwipe.js插件实现

    手机端点击图片放大特效PhotoSwipe.js插件实现

    这篇文章主要为大家详细介绍了手机端点击图片放大特效PhotoSwipe.js插件实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Javascript之面向对象--封装

    Javascript之面向对象--封装

    本篇文章通过具体实例,对Javascript的封装过程进行案例分析,有助于对其代码实现的理解与学习。下面就随小编一起来看看吧
    2016-12-12
  • javascript cookie的简单应用

    javascript cookie的简单应用

    这篇文章主要介绍了javascript cookie的简单应用,我们先介绍一下cookie的使用,以及我后面简单封装一个cookie操作的单例,便于实现cookie的设置,获取,删除的方法,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论