JavaScript获取浏览器信息与URL详解

作者:像素漫游时间:2026-10-29 17:29:02浏览:387

本文介绍如何利用JavaScript的navigator对象获取浏览器名称、版本、平台及Cookie状态等详细信息,并通过对比主流浏览器截图展示差异。同时深入解析window.location对象的七个核心属性,包括href、protocol、host、port、pathname、search和hash,帮助开发者准确获取和解析网页URL地址。

获取浏览器基本信息

Window对象提供了navigator属性,允许开发者获取浏览器的详细信息。通过调用一系列相关的API,可以获取关于浏览器的各种配置和数据。

具体的JavaScript实现代码如下:


function message()
{ 
txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>"; 
txt+= "<p>浏览器平台和版本: " + navigator.appVersion + "</p>";
txt+= "<p>是否开启cookie: " + navigator.cookieEnabled + "</p>";
txt+= "<p>操作系统平台: " + navigator.platform + "</p>"; txt+= "<p>User-agent头部值: " + navigator.userAgent + "</p>"; 
document.getElementById("example").innerHTML=txt; 
if ((navigator.appName=="Netscape" || navigator.appName=="Microsoft Internet Explorer") && (parseFloat(navigator.appVersion)>=4))
{ alert("您的浏览器够先进了!"); }
else 
{ alert("是时候升级您的浏览器了!");
} 
}

通过上述函数,可以向用户提示是否需要升级浏览器,同时帮助用户了解当前浏览器的具体信息。

各大主流浏览器的基本信息展示

作者测试了当前市场上主流的浏览器。尽管浏览器种类繁多,但其底层内核主要归结为Trident、Blink、Gecko和Webkit这几种。在解析能力上,它们之间没有显著差异。以下是相关截图展示:

这是Edge浏览器的显示效果。

获取浏览器基本信息

IE11浏览器的情况,作者未测试IE6,但推测其表现应与IE11相近。

获取浏览器基本信息

Safari浏览器的情况,由于作者使用的是Windows系统,Safari版本较低。

获取浏览器基本信息

搜狗浏览器,作者曾对其情有独钟。

获取浏览器基本信息

QQ浏览器(微信版),表现强劲。目前作者除Chrome外,最常使用的浏览器。它采用双核架构,包括Trident和Blink,在Chrome内核模式下运行速度极快。

获取浏览器基本信息

360安全浏览器的兼容模式,使用IE的Trident内核。

获取浏览器基本信息

Firefox浏览器,无需多言,作为Netscape的正统继承者,是开发者必备的浏览器工具。

获取浏览器基本信息

Chrome浏览器,作者目前使用频率最高的浏览器,对Google的产品表示支持。

获取浏览器基本信息

360安全浏览器的极速模式,采用Chrome内核,运行速度非常快。

获取浏览器基本信息

代码结果分析

对代码执行结果的分析

获取浏览器基本信息

获取URL网址信息

补充说明:使用JavaScript获取浏览器地址及参数的方法

利用JavaScript获取URL网址信息

执行“利用JavaScript获取URL网址信息”代码后的效果如下:


  location.host=www。dw。cn
  location.hostname=www。dw。cn
  location.href=http://www。dw。cn/news/2010-1/201011820131610618.shtml
  location.pathname=/news/2010-1/201011820131610618.shtml
  location.protocol=http:

window.location属性详解

详细介绍window.location方法获取URL

统一资源定位符(Uniform Resource Locator, URL)的完整URL由以下几个部分构成:

scheme://host:port/path?query#fragment

scheme:通信协议

常用的协议包括http、ftp、maito等。

host:主机

服务器(计算机)域名系统(DNS)的主机名或IP地址。

port:端口号

整数,可选参数。若省略,则使用方案的默认端口,例如http的默认端口为80。

path:路径

由零个或多个“/”符号隔开的字符串,通常用于表示主机上的一个目录或文件地址。

query:查询

可选参数,用于向动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数。可以有多个参数,用“&”符号隔开,每个参数的名和值用“=”符号隔开。

fragment:信息片段

字符串,用于指定网络资源中的特定片段。例如,如果一个网页中有多个名词解释,可以使用fragment直接定位到某一个名词解释(也称为锚点)。

示例:

1, window.location.href

整个URL字符串(在浏览器中即完整的地址栏内容)。

返回值示例:http://www。dw。cn:80/index.asp?id=209#asp

2, window.location.protocol

URL的协议部分。

返回值示例:http:

3, window.location.host

URL的主机部分。

返回值示例:www。dw。cn

4, window.location.port

URL的端口部分。如果采用默认的80端口(即使显式添加了:80),返回值并非80,而是空字符串。

本例返回值:空

5, window.location.pathname

URL的路径部分(即文件地址)。

返回值示例:/index.asp

6, window.location.search

查询(参数)部分。除了为动态语言赋值外,我们还可以为静态页面使用JavaScript来获取相应的参数值。

返回值示例:?id=209

7, window.location.hash

锚点。

返回值示例:#asp

作者最新文章