前端两种方式实现获取网页参数

苏丹发布于2019-08-23 14:59 / 2597人阅读

摘要：站长博客浏览器兼容性可以参考使用方法如下原生实现使用方法如果查询参数为

站长博客：https://www.pipipi.net/

URLSearchParams
浏览器兼容性可以参考MDN（https://developer.mozilla.org...）使用方法如下：

var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"

JavaScript原生实现

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[[]]/g, "$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/+/g, " "));
}
//使用方法
//如果查询参数为?foo=chuangke&bar=&baz
var foo = getParameterByName("foo"); // "chuangke"
var bar = getParameterByName("bar"); // "" (present with empty value)
var baz = getParameterByName("baz"); // "" (present with no value)
var qux = getParameterByName("qux"); // null

GPU服务器海外云主机序列化两种方式域名解析的两种主要方式为 cdn实现方式负载均衡实现方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101450.html

【前端芝士树】详解CSS盒模型、BFC、OffsetWidth&ClientWidth&am

摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点主要参考自第一篇文章，然而笔者在读的时...

binta 2019-08-29 16:13 评论0 收藏0
我的大前端- 收藏集 - 掘金

摘要：下面围绕的这样的目的，即左右知乎网页上屏幕截图功能的实现前端掘金背景最近注意到知乎的屏幕截图反馈功能，感觉非常不错。正如你期望的，文中的闯关记之垃圾回收和内存管理前端掘金题图来源，授权基于协议。微信小程序实战学习起手式 DEMO 仿肯德基 - 前端 - 掘金小程序？大场景? 微信小程序本质上来说就是一个 HTML 5（移动网页）应用，用view、scoll-view代替了div标...

LdhAndroid 2019-08-20 18:17 评论0 收藏0
前端质量监控之页面性能相关

摘要：前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作为个人学习记录，如有错误，敬请斧正页面整体性能通过浏览器提供的方法，我们能够得到网页每个处理阶段前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作...

Shihira 2019-08-23 12:56 评论0 收藏0
前端面试题总结——综合问题(持续更新中)

摘要：如何实现浏览器内多个标签页之间的通信阿里调用等本地存储方式页面可见性可以有哪些用途通过的值检测页面当前是否可见，以及打开网页的时间等在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放网页验证码是干嘛的，是为了解决什么安全问题。前端面试题总结——综合问题(持续更新中) 1.页面从输入URL到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好） 1.输入域名地址2.发...

Lin_YT 2019-08-30 13:59 评论0 收藏0