有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

获取路由参数(通过js获得当前页面路由参数的方法)

javascript 炮渣日记 2周前 (11-18) 70次浏览 已收录 0个评论 扫描二维码

通过js获得当前页面路由参数,是一个常用的方法,即使是静态的html页面,也可以借此获得传来的参数,达到动态页面一般的效果。

window.location

我们需要用到的就是window.location的几个属性,下面从这个简单的测试代码中可以看到详细的用法:

建立一个htm文件,先设置一个全局样式,为的是清晰地显示文字

<style>
body{
 background-color: #111;
 color:#0c0;
 font-family: 'Courier New';
 font-size: 36px;
}
</style>

下面是js代码部分

<script>
a="<pre>";
//获取完整的 URL。
a+="n href = "
+ window.location.href;
//获取 URL 的协议类型。
a+="nprotocol = "
+ window.location.protocol;
//获取 网址:端口号。
a+="n host = "
+ window.location.host;
//获取/开头的带路径的文件名。
a+="npathname = "
+ window.location.pathname;
//获取文件名问号后面的部分(含问号)
a+="n search = "
+ window.location.search;
//获取 URL 最后#号后的部分(含#号)
a+="n hash = "
+ window.location.hash;
//获取 URL 的端口号。
a+="n port = "
+ window.location.port;
a+="n</pre>";
//把上面的结果显示出来
document.write(a);
</script>

保存代码到一个页面比如1.htm,我们需要在本地启动一个模拟的web服务器,比如使用vscode的GoLive插件,在本例中,它启用的默认web地址是 http://127.0.0.1:5500 ,在其对应的根目录下建立js目录,1.htm放在其中,然后我访问类似这样的地址即可看到页面:

http://127.0.0.1:5500/js/1.htm

这是一个普通的静态页面地址,我们可以带上一些参数,形成这样的地址:

http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first

这是个比较完整的url,他带有了协议,端口,路径,参数,还有锚点,已经可以满足所有动态页面的应用,我们得到这个结果:

获取路由参数(通过js获得当前页面路由参数的方法)

我们可以看到,所有的参数都被解析出来了!

注:当然你也可以直接打开浏览器访问页面1.htm,而无需启动模拟的web服务器。显示的协议是file://开头的。但是路径编码后会比较长不方便看,仅此而已。

总结一下:

window.location.href

获取完整的 URL:

http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first

window.location.protocol

获取 URL 的协议类型:

http:

window.location.host

获取网址和端口号:

127.0.0.1:5500

window.location.pathname

获取/开头的带路径的文件名:

/js/1.htm

window.location.search

获取文件名问号后面的部分(含问号)

?id=7&do=ok

window.location.hash

获取 URL 最后#号后的部分(含#号)

#first

window.location.port

获取 URL 的端口号。

5500

以上就是js所能获得的url参数了。方法简单而用法无穷:

我们可以通过获取这些属性,来判断页面状态,做出相应的动作或者交互响应。

我们也可以通过写入新的数据而使这些属性发生改变,此时页面就会跳转到新的url页面去了!

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址