通过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 = https://www.isolves.com/it/cxkf/yy/js/2019-08-29/"+ 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";//把上面的结果显示出来document.write(a);保存代码到一个页面比如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 , 他带有了协议 , 端口 , 路径 , 参数 , 还有锚点 , 已经可以满足所有动态页面的应用 , 我们得到这个结果:
文章插图
我们可以看到 , 所有的参数都被解析出来了!
注:当然你也可以直接打开浏览器访问页面1.htm , 而无需启动模拟的web服务器 。显示的协议是file://开头的 。但是路径编码后会比较长不方便看 , 仅此而已 。总结一下:
window.location.href
推荐阅读
- Windows server 2008 R2设置网络应用通过防火墙
- 吃茄子上火吗?茄子的营养价值有哪些?
- 梦见面试通过了 梦见考试成功被录取
- 疟疾是什么虫引起的 疟疾通过蚊虫叮咬传播吗
- 微信发送工资条,1分钟搞定
- 湖北英山云雾茶国家地理标志产品保护示范区通过国家专家组验收
- 电热水器处于保温状态有电流通过吗 热水器保温状态用电吗
- 淘宝数字娱乐市场经营资质怎么获得 淘宝数字娱乐市场怎么加入
- 微店接入微信视频号功能,视频号博主可通过“带货”变现
- 微服务API通过ip可访问,域名不可访问问题分析