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

2023-04-13 14:11:02JavaScript022

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

在WEB开发中，时常会用到javascript来获取当前页面的url网址信息，在这里是我的一些获取url信息的小总结。下面我们举例一个URL，然后获得它的各个组成部分：http://i.cnblogs.com/EditPosts.aspx?opt=11、window.location.href(设置或获取整个 URL 为字符串)var test = window.location.href alert(test) 返回：http://i.cnblogs.com/EditPosts.aspx?opt=12、window.location.protocol(设置或获取 URL 的协议部分)var test = window.location.protocol alert(test) 返回：http:3、window.location.host(设置或获取 URL 的主机部分)var test = window.location.host alert(test) 返回：i.cnblogs.com4、window.location.port(设置或获取与 URL 关联的端口号码)var test = window.location.port alert(test) 返回：空字符(如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符)5、window.location.pathname(设置或获取与 URL 的路径部分（就是文件地址）)var test = window.location.pathname alert(test) 返回：/EditPosts.aspx6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)var test = window.location.search alert(test) 返回：?opt=1 PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用javascript来获得相信应的参数值。7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)var test = window.location.hash alert(test) 返回：空字符(因为url中没有)8、js获取url中的参数值一、正则法 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"))二、split拆分法 function GetRequest() { var url = location.search//获取url中"?"符后的字串 var theRequest = new Object() if (url.indexOf("?") != -1) { var str = url.substr(1) strs = str.split("&") for(var i = 0i <strs.lengthi ++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]) } } return theRequest } var Request = new Object() 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：http://i.cnblogs.com/?j=js,我们想得到参数j的值，可以通过以下函数调用。function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i") var r = window.location.search.substr(1).match(reg)//获取url中"?"符后的字符串并正则匹配 var context = "" if (r != null) context = r[2] reg = null r = null return context == null || context == "" || context == "undefined" ? "" : context } alert(GetQueryString("j"))四、单个参数的获取方法 function GetRequest() { 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) if(r != null) { returnunescape(r[2]) } returnnull } // 这样调用： alert(GetQueryString("参数名1"))alert(GetQueryString("参数名2"))alert(GetQueryString("参数名3")) 二、split拆分法functionGetRequest() { varurl = location.search//获取url中"?"符后的字串 vartheRequest = newObject() if(url.indexOf("?") != -1) { varstr = url.substr(1) strs = str.split("&") for(vari = 0i <strs.lengthi ++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]) } } returntheRequest } varRequest = newObject() 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：http://i.cnblogs.com/?j=js,我们想得到参数j的值，可以通过以下函数调用。 functionGetQueryString(name) { varreg = newRegExp("(^|&)"+ name + "=([^&]*)(&|$)", "i") varr = window.location.search.substr(1).match(reg)//获取url中"?"符后的字符串并正则匹配 varcontext = "" if(r != null) context = r[2] reg = null r = null returncontext == null|| context == ""|| context == "undefined"? "": context } alert(GetQueryString("j")) 四、单个参数的获取方法functionGetRequest() { varurl = location.search//获取url中"?"符后的字串 if(url.indexOf("?") != -1) { //判断是否有参数 varstr = url.substr(1)//从第一个字符开始因为第0个是?号获取所有除问号的所有符串 strs = str.split("=") //用等号进行分隔（因为知道只有一个参数所以直接用等号进分隔如果有多个参数要用&号分隔再用等号进行分隔） alert(strs[1]) //直接弹出第一个参数（如果有多个参数还要进行循环的） } }

本章内容分为三部分：开始之前先简单了解一下如：url地址: http://xxxxx:9010/test.html?leaf&le=2window.location.search获取到的就是 ?leaf&le=2 window.location.search.substr(1)获取到的就是 leaf&le=2 一、JS获取地址栏url参数：如果你想获取地址栏的其他参数，只需要执行 var 参数=getUrlParam('参数') 比如获取参数a,执行 var a=getUrlParam('a') 就可以啦。简单又实用。二、解决请求接口乱码问题但是在我请求接口数据的时候，页面获取到是类似？？？这种乱码。然后我是这样解决的： 1、发送方decodeURI编码： 2、接收方encodeURI解码根据后台接口拼接url中使用encodeURI：三、关于根据后台接口拼接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] 为上上一个，以此类推。

二、js如何获取前两页的url

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

三、如何使用js获取修改URL

使用js对当前的URL进行操作，可以使用内置对象window.locationwindow.location有以下属性：window.location.href：取得当前地址栏中的完整URL，可以通过赋值改变当前地址栏中的URLwindow.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获取几种URL地址的方法

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

五、js中如何获取前一个页面的url

获取的方法如下：

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