js获取带#号链接后的参数
现在许多的主流网站都将'#'大规模用于重要URL中,我们通过正则表达式和window.location.search获取参数已经行不通了。
一.'#'号是什么
1.#代表网页中的一个位置。其后面的字符,就是该位置的标识符。
2.#是用来指导浏览器动作的,对服务器端完全无用。所以,HTTP请求中不包括#。
3.在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。
4.单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页。
5.每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用"后退"按钮,就可以回到上一个位置。
二.如何获取#号后的字符串
1.window.location.search:获取当前URL的'?'号开始的字符串
2.window.location.hash:获取当前URL的'#'后面的字符串
三.js代码
1.获取链接后的参数(不带#号)
getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[]);
return null;
}
2.获取链接后的参数(带#号)
getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
if(window.location.hash.indexOf("?") < ){
return null;
}
let r = window.location.hash.split("?")[].match(reg);
if (r != null) return decodeURIComponent(r[]);
return null;
}
3.使用方法
console.log('name is ',getQueryString('name'))
感谢您的阅读,如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮。本文欢迎各位转载,但是转载文章之后必须在文章页面中给出作者和原文连接。
js获取带#号链接后的参数的更多相关文章
- js获取或设置当前窗口url参数
直接上代码 // 获取当前窗口url中param参数的值 function get_param(param){ var query = location.search.substring(1).spl ...
- 现代浏览器原生js获取id号方法
<div id="tests" class="a b c" style="color:#f00">123</div> ...
- 前端页面js与flash交互——js获取flash对象,并传递参数
背景介绍: 最近在搞一个项目,涉及到图片选取,裁剪,上传等,由于浏览器安全性问题,js无法获取到<input type="file">中选取的文件路径,而且对照片的裁剪 ...
- js 获取页面内链接
今天有同学问如何用 JS 正则表达式获取一段文本中的超链接,并对超链接进行处理,想了几分钟,写了下面的代码: var re = /https?:\/\/[\w\.:~\-\d\/]+(?:\?[\w\ ...
- js获取指定字符前/后的字符串简单实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [转]js获取iframe通过url传递的参数
1.前言 获取iframe的url路径:window.parent.document.getElementById("your-iframe-id").contentWindow. ...
- H5_0016:js获取网络中配置文件中的参数
//获取网络配置文件中的参数 $.get("https://cdn.com/share.json", function(e) { //console ...
- js获取URL地址中的GET参数
var $_GET = (function(){ var url = window.document.location.href.toString(); var u = url.split(" ...
- js篇-解析url链接里面的参数名和参数值
项目背景是,链接为:https://paladin.pingan.com.cn/jf/?appId=PA00200000000_01_APP&id=123456#/fundRank 要求拿到: ...
随机推荐
- Scrum冲刺阶段2
成员今日完成的任务 人员 任务 何承华 后端设计 陈宇 后端设计 丁培辉 后端设计 温志铭 主页面的设计 杨宇潇 主页面的设计 张主强 服务器构建 成员遇到的问题 人员 问题 何承华 暂无 陈宇 暂无 ...
- Java集合:ArrayList的实现原理
Java集合---ArrayList的实现原理 目录: 一. ArrayList概述 二. ArrayList的实现 1) 私有属性 2) 构造方法 3) 元素存储 4) 元素读取 5) 元素删除 ...
- #10072. 「一本通 3.2 例 1」Sightseeing Trip(floyd求最小环+路径)
https://loj.ac/problem/10072 针对无向图 因为Floyd是按照结点的顺序更新最短路的,所以我们在更新最短路之前先找到一个连接点k,当前的点k肯定不存在于已存在的最短路f[i ...
- spring中的aop演示
一.步骤(XML配置) 1.导包4+2+2+2 2.准备目标对象 3.准备通知 4.配置进行织入,将通知织入目标对象中 <! -- 3.配置将通知织入目标对象> 5.测试 二.步骤(注解配 ...
- ABP框架系列之四十七:(SignalR-Integration-SignalR-集成)
Introduction Abp.Web.SignalR nuget package makes it easily to use SignalR in ASP.NET Boilerplate bas ...
- 获得文件的CRC32值
使用方法:先调用init_crc32_tab生成查询表,再调用calc_img_crc获得文件的CRC值. #define Poly 0xEDB88320L//CRC32标准 ];//CRC查询表 / ...
- qhfl-2 ContentType组件
一般商城里有很多的商品,计优惠券对应着活动类型商品,家电是一类商品,食物是一类商品,优惠券对应着不同的商品类别. from django.db import models class Applianc ...
- Unity3D使用EasyMovieTexture插件播放视频
Unity3D对于视频的播放兼容个人感觉很差劲,之前写过一篇使用Unity3D自己自带的一些功能去播放视频,链接如下: http://www.cnblogs.com/xiaoyulong/p/8627 ...
- 冲刺博客NO.10
今天做了什么:将程序整合到一起,出现了不少小错误,但是在讨论后都解决了. 遇到的难题:没遇到什么大困难
- [算法专题] Binary Tree
1 Same Tree https://leetcode.com/problems/same-tree/ Given two binary trees, write a function to che ...