JS如何获取地址栏的参数实例讲解

 更新时间:2018年10月06日 12:26:45   投稿:laozhang  
本篇文章给大家带来了关于JS如何获取地址栏的参数实例讲解,有需要的朋友们参考下。

地址: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);

重新加载当前文档。

如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

window.location.reload(true);

window.location.reload(false);

返回完整的 URL。

console.log(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;

 

    }

 

    // ?id=6666&name=prosper

    getUrlParam('id'); // s的输出为["id=6666&","","6666","&"]

    getUrlParam('name'); // s的输出为["name=prosper","&","prosper",""]

相关文章

  • javascript中局部变量和全局变量的区别详解

    javascript中局部变量和全局变量的区别详解

    本文主要是向大家详细的对比分析了javascript中局部变量和全局变量的区别,是篇非常不错的文章,值得仔细去品读,推荐给小伙伴们。
    2015-02-02
  • JavaScript的Proxy可以做哪些有意思的事儿

    JavaScript的Proxy可以做哪些有意思的事儿

    这篇文章主要介绍了JavaScript的Proxy可以做哪些有意思的事儿,Proxy是ES6中提供的新的API,可以用来定义对象各种基本操作的自定义行为 (在文档中被称为traps,我觉得可以理解为一个针对对象各种行为的钩子),,需要的朋友可以参考下
    2019-06-06
  • js数组中如何随机取出一个值

    js数组中如何随机取出一个值

    这篇文章主要介绍了js数组中如何随机取出一个值,需要的朋友可以参考下
    2014-06-06
  • 详解微信小程序动画Animation执行过程

    详解微信小程序动画Animation执行过程

    这篇文章主要介绍了微信小程序动画Animation执行过程 / 实现过程 / 实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09
  • 深入理解令牌认证机制(token)

    深入理解令牌认证机制(token)

    这篇文章主要介绍了深入理解令牌认证机制(token),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • JS删除数组中某个元素的四种方式总结

    JS删除数组中某个元素的四种方式总结

    js删除指定元素方法有很多,下面这篇文章主要给大家介绍了关于JS删除数组中某个元素的四种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • webpack-bundle-analyzer 插件配置使用方法

    webpack-bundle-analyzer 插件配置使用方法

    webpack-bundle-analyzer 是 webpack 的插件,需要配合 webpack 和 webpack-cli 一起使用,这篇文章主要介绍了webpack-bundle-analyzer 插件配置,需要的朋友可以参考下
    2023-02-02
  • JS实现的图片选择顺序切换和循环切换功能示例【测试可用】

    JS实现的图片选择顺序切换和循环切换功能示例【测试可用】

    这篇文章主要介绍了JS实现的图片选择顺序切换和循环切换功能,结合完整实例形式分析了JavaScript基于事件响应与样式动态操作实现图片切换相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • JavaScript基本类型值-Undefined、Null、Boolean

    JavaScript基本类型值-Undefined、Null、Boolean

    本文主要介绍了JavaScript基本类型值-Undefined、Null、Boolean的相关知识,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • ElementUI中el-tree如何获取每个节点点击的选中状态

    ElementUI中el-tree如何获取每个节点点击的选中状态

    ElementUI中el-tree获取每个节点点击的选中状态,有时候需要获取el-tree每个节点的点击状态,可以通过以下方式,其中isCheck类型为布尔值,本文结合实例代码介绍ElementUI中el-tree获取每个节点点击的选中状态,感兴趣的朋友一起看看吧
    2023-12-12

最新评论