前端(九):地址栏地址分析&获取地址栏传参

简介: 地址栏地址分析&获取地址栏传参

Example

  • 地址:http://127.0.0.1:8082/prosperleedir/index.html?id=6666&name=prosper#prosper
Location{
   
   
   assign:ƒ (),                                                                            // 加载新的文档。
   hash:"#prosper",                                                                        // 设置或返回从井号 (#) 开始的 URL(锚)。
   host:"127.0.0.1:8082",                                                                  // 设置或返回主机名和当前 URL 的端口号。
   hostname:"127.0.0.1",                                                                   // 设置或返回当前 URL 的主机名。
   href:"http://127.0.0.1:8082/prosperleedir/index.html?id=6666&name=prosper#prosper",     // 设置或返回完整的 URL。
   origin:"http://127.0.0.1:8082",                                                         // 返回当前 URL 的协议和主机名和当前 URL 的端口号。
   pathname:"/prosperleedir/index.html",                                                   // 设置或返回当前 URL 的路径部分。
   port:"8082",                                                                            // 设置或返回当前 URL 的端口号。
   protocol:"http:",                                                                       // 设置或返回当前 URL 的协议。
   reload:ƒ reload(),                                                                      // 重新加载当前文档。
   replace:ƒ (),                                                                           // 用新的文档替换当前文档。
   search:"?id=6666&name=prosper",                                                         // 设置或返回从问号 (?) 开始的 URL(查询部分)。
   toString:ƒ toString(),                                                                  // 返回完整的 URL。
}

使用

  • 加载新的文档。
    • window.location.assign("http://www.baidu.com");
  • 用新的文档替换当前文档。
    • window.location.replace("http://www.baidu.com");
  • 重新加载当前文档。
    • window.location.reload(true); true 无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。相当于单击浏览器的刷新按钮时按住 Shift 健。
    • window.location.reload(false); false 会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。相当于普通点击刷新。
  • 返回完整的 URL。
    • window.location.toString();
  • 地址示例:
    示例

    获取参数

/**
 * [getUrlParam 获取地址栏传参]
 * @param  {[String]} paramname [参数名]
 * @return {[String]}           [参数值]
 */
function getUrlParam(paramname) {
   
   
   var reg = new RegExp("(^|&)" + paramname + "=([^&]*)(&|$)");
   // 查询匹配 substr(1)删除? match()匹配
   var s = window.location.search.substr(1).match(reg);
   if (s != null) {
   
   
       return unescape(s[2]); // unescape() 函数可对通过 escape() 编码的字符串进行解码。
   }
   return null;
}

// url: ?id=6666&name=prosper
getUrlParam('id'); // s的输出为["id=6666&","","6666","&"]
getUrlParam('name'); // s的输出为["name=prosper","&","prosper",""]
目录
相关文章
|
8月前
|
前端开发 测试技术
【前端验证】记录将发包量作为传参以加速debug的环境优化记录
【前端验证】记录将发包量作为传参以加速debug的环境优化记录
|
8月前
|
JavaScript 前端开发 API
【前端用法】jQuery在线引用地址(全)
【前端用法】jQuery在线引用地址(全)
1178 0
|
1月前
|
人工智能 前端开发 搜索推荐
前端技术发展趋势分析与展望
【2月更文挑战第9天】 随着移动互联网的快速发展,前端技术在不断演进,从最初的HTML、CSS到如今的React、Vue等前端框架,技术发展日新月异。本文将从移动端、跨平台、人工智能等多个角度分析前端技术的发展趋势,并展望未来的发展方向。
|
1月前
|
前端开发 JavaScript Android开发
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
【5月更文挑战第16天】Uniapp是一个基于Vue.js的跨平台前端框架,能将代码编译成iOS、Android、H5等多个平台应用,简化跨平台开发。相比React和Angular,Uniapp更适合移动应用,减少平台适配工作。Vue.js的组件化和灵活性在Uniapp中得到延伸,增加了移动端特性。而Flutter性能优越,但学习成本高。开发者应根据项目需求和技术栈选择合适的框架。
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
|
1天前
|
缓存 监控 前端开发
前端性能优化:从系统分析到实践策略
**前端性能优化概述** 本文探讨了前端性能优化的重要性,强调了从整体角度而非仅关注局部优化手段的必要性。作者指出,建立性能评价系统是关键,通过**性能指标**(如FP、FCP、LCP、CLS等)来量化页面性能,然后使用**性能监控**工具收集数据。文章列举了9个关键性能指标,并介绍了如何通过SDK或工具进行数据收集。 在实际操作中,文章提到了**性能优化方法论**,包括了解何时何地出现性能问题,以及如何根据性能指标采取相应优化措施。作者推荐使用Chrome的Lighthouse工具进行性能测试,并讨论了**CDN**、**缓存策略**和**懒加载**作为常见的优化手段。
20 0
|
1月前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目
|
1月前
|
前端开发 JavaScript 搜索推荐
前端网页手册(2)--菜鸟教程网站分析
前端网页手册(2)--菜鸟教程网站分析
25 2
|
1月前
|
前端开发 JavaScript 网络协议
【专栏】探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验
【4月更文挑战第29天】本文探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验。通过 Performance,可检测资源加载时间、JavaScript 执行时间、重绘与回流等关键指标,找到性能瓶颈。文中列举了三个实践案例,如优化图片加载、减少 JavaScript 执行时间和避免重绘回流,展示如何利用 Performance 改进页面性能,提升用户体验。开发者应定期使用 Performance 分析并学习新优化技术,以适应Web开发的快速发展。
|
1月前
|
前端开发 JavaScript 开发者
深入理解前端性能优化:从加载到渲染的全流程分析
前端性能优化是Web开发中的关键一环。本文将从加载资源、解析HTML、执行JavaScript、样式计算、布局和渲染等多个方面深入探讨前端性能优化的全流程,为开发者提供全面的技术指南和实用建议。
|
1月前
|
JSON 前端开发 Java
前端axios传参总结
该文介绍了在前后端分离的开发中,前端使用axios向后端Spring传递参数的两种主要方法。针对@RequestParam注解,推荐使用params传参,将参数格式化为x-www-form-urlencoded,或者使用FormData和qs.stringify。对于@RequestBody,Axios的data传参默认为JSON格式,直接传入对象即可。