前端兩種方式實現獲取網頁參數

蘇丹發布于2019-08-23 14:59 / 2704人閱讀

摘要：站長博客瀏覽器兼容性可以參考使用方法如下原生實現使用方法如果查詢參數為

站長博客：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實現方式負載均衡實現方式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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