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

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

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",""]
目录
相关文章
|
13天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
19 1
|
14天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
14 1
|
20天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
1月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
206 0
|
6月前
|
人工智能 前端开发 搜索推荐
前端技术发展趋势分析与展望
【2月更文挑战第9天】 随着移动互联网的快速发展,前端技术在不断演进,从最初的HTML、CSS到如今的React、Vue等前端框架,技术发展日新月异。本文将从移动端、跨平台、人工智能等多个角度分析前端技术的发展趋势,并展望未来的发展方向。
|
3月前
|
前端开发 大数据 数据库
🔥大数据洪流下的决战:JSF 表格组件如何做到毫秒级响应?揭秘背后的性能魔法!💪
【8月更文挑战第31天】在 Web 应用中,表格组件常用于展示和操作数据,但在大数据量下性能会成瓶颈。本文介绍在 JavaServer Faces(JSF)中优化表格组件的方法,包括数据处理、分页及懒加载等技术。通过后端分页或懒加载按需加载数据,减少不必要的数据加载和优化数据库查询,并利用缓存机制减少数据库访问次数,从而提高表格组件的响应速度和整体性能。掌握这些最佳实践对开发高性能 JSF 应用至关重要。
67 0
|
4月前
|
缓存 监控 前端开发
前端开发中的性能瓶颈分析与优化
【7月更文挑战第27天】前端开发中的性能优化是一个系统工程,需要从多个角度入手,综合运用多种策略。通过减少网络延迟、优化资源加载、优化DOM操作、优化JavaScript执行以及第三方服务优化等措施,可以显著提升前端应用的性能。同时,通过性能监控和调优工具的使用,可以持续监控和优化应用性能,确保用户获得流畅、高效的体验。
|
6月前
|
前端开发 JavaScript Android开发
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
【5月更文挑战第16天】Uniapp是一个基于Vue.js的跨平台前端框架,能将代码编译成iOS、Android、H5等多个平台应用,简化跨平台开发。相比React和Angular,Uniapp更适合移动应用,减少平台适配工作。Vue.js的组件化和灵活性在Uniapp中得到延伸,增加了移动端特性。而Flutter性能优越,但学习成本高。开发者应根据项目需求和技术栈选择合适的框架。
174 4
【Uniapp 专栏】分析 Uniapp 与其他前端框架的异同
|
5月前
|
缓存 监控 前端开发
前端性能优化:从系统分析到实践策略
**前端性能优化概述** 本文探讨了前端性能优化的重要性,强调了从整体角度而非仅关注局部优化手段的必要性。作者指出,建立性能评价系统是关键,通过**性能指标**(如FP、FCP、LCP、CLS等)来量化页面性能,然后使用**性能监控**工具收集数据。文章列举了9个关键性能指标,并介绍了如何通过SDK或工具进行数据收集。 在实际操作中,文章提到了**性能优化方法论**,包括了解何时何地出现性能问题,以及如何根据性能指标采取相应优化措施。作者推荐使用Chrome的Lighthouse工具进行性能测试,并讨论了**CDN**、**缓存策略**和**懒加载**作为常见的优化手段。
117 0
|
6月前
|
SQL Oracle 前端开发
Oracle效率分析,Github标星25K+超火的前端实战项目
Oracle效率分析,Github标星25K+超火的前端实战项目