前端使用js如何准确获取当前页面url网址信息

发布时间:2025-05-22 23:57:01 发布人:远客网络

一、前端使用js如何准确获取当前页面url网址信息

在WEB开发中，时常会用到javascript来获取当前页面的url网址信息，在这里是我的一些获取url信息的小总结。

下面我们举例一个URL，然后获得它的各个组成部分：

1、window.location.href(设置或获取整个 URL为字符串)

var test= window.location.href;

2、window.location.protocol(设置或获取 URL的协议部分)

var test= window.location.protocol;

3、window.location.host(设置或获取 URL的主机部分)

var test= window.location.host;

4、window.location.port(设置或获取与 URL关联的端口号码)

var test= window.location.port;

返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)

5、window.location.pathname(设置或获取与 URL的路径部分（就是文件地址）)

var test= window.location.pathname;

6、window.location.search(设置或获取 href属性中跟在问号后面的部分)

var test= window.location.search;

PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。

7、window.location.hash(设置或获取 href属性中在井号“#”后面的分段)

var test= window.location.hash;

function getQueryString(name){ var reg= new RegExp('(^|&)'+ name+'=([^&]*)(&|$)','i'); var r= window.location.search.substr(1).match(reg); if(r!= null){ return unescape(r[2]); } return null;}//这样调用：alert(GetQueryString("参数名1")); alert(GetQueryString("参数名2")); alert(GetQueryString("参数名3"));

var url= location.search;//获取url中"?"符后的字串

var theRequest= new Object();

if(url.indexOf("?")!=-1){

var str= url.substr(1);

strs= str.split("&");

for(var i= 0; i< strs.length; i++){

theRequest[strs[i].split("=")[0]]= unescape(strs[i].split("=")[1]);

Request= GetRequest();<br>// var id=Request["id"];

// var参数1,参数2,参数3,参数N;

//参数1= Request['参数1'];

//参数2= Request['参数2'];

//参数3= Request['参数3'];

//参数N= Request['参数N'];

比如说一个url：,我们想得到参数j的值，可以通过以下函数调用。

function GetQueryString(name){

var reg= new RegExp("(^|&)"+ name+"=([^&]*)(&|$)","i");

var r= window.location.search.substr(1).match(reg);//获取url中"?"符后的字符串并正则匹配

return context== null|| context==""|| context=="undefined"?"": context;

var url= location.search;//获取url中"?"符后的字串

if(url.indexOf("?")!=-1){ //判断是否有参数

var str= url.substr(1);//从第一个字符开始因为第0个是?号获取所有除问号的所有符串

strs= str.split("="); //用等号进行分隔（因为知道只有一个参数所以直接用等号进分隔如果有多个参数要用&号分隔再用等号进行分隔）

alert(strs[1]); //直接弹出第一个参数（如果有多个参数还要进行循环的）

functiongetQueryString(name){

varreg= newRegExp('(^|&)'+ name+'=([^&]*)(&|$)','i');

varr= window.location.search.substr(1).match(reg);

returnunescape(r[2]);

alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

varurl= location.search;//获取url中"?"符后的字串

vartheRequest= newObject();

if(url.indexOf("?")!=-1){

varstr= url.substr(1);

strs= str.split("&");

for(vari= 0; i< strs.length; i++){

theRequest[strs[i].split("=")[0]]= unescape(strs[i].split("=")[1]);

Request= GetRequest();<br>// var id=Request["id"];

// var参数1,参数2,参数3,参数N;

//参数1= Request['参数1'];

//参数2= Request['参数2'];

//参数3= Request['参数3'];

//参数N= Request['参数N'];

比如说一个url：,我们想得到参数j的值，可以通过以下函数调用。

functionGetQueryString(name){

varreg= newRegExp("(^|&)"+ name+"=([^&]*)(&|$)","i");

varr= window.location.search.substr(1).match(reg);//获取url中"?"符后的字符串并正则匹配

context= r[2];

returncontext== null|| context==""|| context=="undefined"?"": context;

varurl= location.search;//获取url中"?"符后的字串

if(url.indexOf("?")!=-1){ //判断是否有参数

varstr= url.substr(1);//从第一个字符开始因为第0个是?号获取所有除问号的所有符串

strs= str.split("="); //用等号进行分隔（因为知道只有一个参数所以直接用等号进分隔如果有多个参数要用&号分隔再用等号进行分隔）

alert(strs[1]); //直接弹出第一个参数（如果有多个参数还要进行循环的）

二、js获取当前页面的url网址参数

在前端开发的场景中，经常需要处理与页面URL相关的操作，这里列举了获取不同部分的几种常见方法：

1.要获取整个URL，包括协议、域名、端口和路径，可以使用window.location.href属性，例如：`window.location.href—— ?...

2.如果只需要获取协议部分，可以使用window.location.protocol，它会返回"http:"或"https:"等：`

window.location.protocol—— http:

3.要获取域名和端口，可以使用window.location.host，格式为"hostname:port"，如："baidu.com:8080"：`

window.location.host—— baidu.com:8080

4.域名单独获取，使用window.location.hostname，例如："baidu.com"：`

window.location.hostname—— baidu.com

5.端口号的获取，window.location.port会返回数字，如："8080"：`

6.路径信息则在window.location.pathname中，如"/test"：`

window.location.pathname——/test

7.而请求参数通常包含在window.location.search中，以问号"?"开始，如"?id=123"：`

window.location.search——?id=123

8.如果要获取路径前面的完整URL（不包括协议），可以使用window.location.origin，例如："baidu.com:8080"：`

window.location.origin—— baidu.com:8080`

通过这些属性，你可以轻松地解析和操作当前页面的URL。

三、js获取历史url

一、JS高手呢,获取历史网址

你的问题涉及到 Same Origin Policy（同源策略），这是一个关系到隐私和安全性的问题。任何浏览器都不会给你机会让你访问**异域**历史网址。

但是，如果这三个页面在同一域名下，你可以使用 Javascript的 document.cookie来记录每次访问的网址。

我写的例子需要4个文件，url_history.js,1.,2.,3.（三个文件内容相同），代码写在空间（hi.baidu/keneks/item/50699e21f9300d0c72863e4d）

复制粘贴，将 url_history.js和其它三个文件放在一起，访问任何一个页面，点击任何链接，上面会自动显示曾经访问过的页面。

历史网址以 array形式保存在 url_history变量中，所以 url_history[0]为上一个，url_history[1]为上上一个，以此类推。

代码如下：<script type=text/javascript> var referrer= document.referrer; if(!referrer){ try{ if(window.opener){// IE下如果跨域则抛出权限异常// Safari和Chrome下window.opener.location没有任何属性 referrer= window.opener.location.href;}} catch(e){}}</script>；你的q号，我一会远程助你。

使用js对当前的URL进行操作，可以使用内置对象window.location;window.location有以下属性：window.location.href：取得当前地址栏中的完整URL，可以通过赋值改变当前地址栏中的URL;window.location.search取得当前URL的参数部分，即“？”后面的部分（包括问号），可以通过赋值改变URL的参数部分；window.location.hash：取得当前URL中包含的锚记，即“#”后面的部分（包括#），可以通过赋值改变URL的锚记部分；window.location.host：取得当前URL中的主机信息，包括端口号，可以通过赋值改变主机信息；window.location.hostname：取得当前URL中的域名部分，不包括端口号，可以通过赋值改变域名；window.location.port：取得当前URL中的端口号，可以通过赋值改变端口号；window.location.pathname：取得当前URL中的路径信息，即域名与参数之间的部分，可以通过赋值改变当前URL的路径；window.location.protocol：取得当前URL的协议部分，比如:,：等，可以通过赋值改变URL的协议部分；window.location有一下方法：window.location.replace(url)：用传入的URL字符串替代当前的URL，该方法会将历史记录中的URL一并替换掉，也就是说，这个方法会覆盖之前的历史记录；window.location.reload（)：重新加载当前URL，相当于刷新；window.location.assign(url)：加载传入的URL，该方法不会覆盖之前的历史记录；。

下面为使用JS获取MAC地址、IP地址及主机名的方法：复制代码代码如下：<meta-equiv="Content-Type" content="text/; charset=gbk"><body>。

1、设置或获取整个 URL为字符串： window.location.href

2、设置或获取与 URL关联的端口号码： window.location.port

3、设置或获取 URL的协议部分 window.location.protocol

4、设置或获取 href属性中跟在问号后面的部分 window.location.search

5、获取变量的值（截取等号后面的部分）

6、设置或获取 URL的协议部分： window.location.protocol

7、设置或获取 href属性中在井号“#”后面的分段： window.location.hash

8、设置或获取 location或 URL的 hostname和 port号码： window.location.host

使用js对当前的URL进行操作，可以使用内置对象window.location;

window.location.href：取得当前地址栏中的完整URL，可以通过赋值改变当前地址栏中的URL;

window.location.search取得当前URL的参数部分，即“？”后面的部分（包括问号），可以通过赋值改变URL的参数部分；