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

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

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",""]
目录
相关文章
|
6天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
Flex 布局 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。 一、Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
106 1
|
6天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
盒模型 盒模型: 所谓盒模型,就是浏览器为页面中的每个HTML元素生成的矩形盒子。 这些盒子们都要按照可见板式模型在页面上排布。 可见的板式模型主要由三个属性控制:position 属性、display 属性和 float属性。 position属性控制页面上元素间的位置关系。 display属性控制元素是堆叠、并排或者不在页面上显示。 float属性提供控制的方法,以便于把元素组成成多栏布局。 盒模型讲解: 在默认的情况下,每个盒子的边框是不可见的,背景也是透明的。 所以我们 不能直接的看到页面中的盒
38 0
|
6天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
Animation属性 css3为Animation动画提供的几个属性如下: 属性名 属性值 animation-name 指定动画名称,该属性指定一个已有的关键帧定义。 animation-duration 指定动画持续时间。 animation-timing-funtion 指定动画变化速度。 animation-delay 指定动画延迟多长时间才开始执行。 animation-iteration-count 指定动画的循环执行次数。 animation:这是一个复合属性。
25 0
|
6天前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
76 1
|
9月前
|
人工智能 前端开发 架构师
2025年前端局势分析,我该不该转行?
2024年,前端领域经历了快速变化,AIGC的兴起和市场HC减少使得前端工程师面临挑战。尽管AI工具如通义灵码和Cursor能高效生成代码,但AI无法完全取代前端工程师,因其缺乏逻辑、沟通和创新能力。前端工作不仅限于编码,还包括需求分析、代码评审等。未来,前端不会“死亡”,而是持续演变。面对大环境的压力,提升综合能力、拥抱变化、持续学习和保持身心健康是关键。转型方向包括升管理、做架构师或转讲师等。稳住2025年,需适应变化、不断学习并探索更多可能性。
1182 16
|
11月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
383 1
|
11月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
369 1
|
12月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
453 2
|
12月前
|
前端开发 JavaScript Java
导出excel的两个方式:前端vue+XLSX 导出excel,vue+后端POI 导出excel,并进行分析、比较
这篇文章介绍了使用前端Vue框架结合XLSX库和后端结合Apache POI库导出Excel文件的两种方法,并对比分析了它们的优缺点。
2647 0
|
缓存 监控 前端开发
前端开发中的性能瓶颈分析与优化
【7月更文挑战第27天】前端开发中的性能优化是一个系统工程,需要从多个角度入手,综合运用多种策略。通过减少网络延迟、优化资源加载、优化DOM操作、优化JavaScript执行以及第三方服务优化等措施,可以显著提升前端应用的性能。同时,通过性能监控和调优工具的使用,可以持续监控和优化应用性能,确保用户获得流畅、高效的体验。