Last active
September 27, 2024 01:09
-
-
Save lewdev/a65bbe0c3f5a31bc5740c50a0dd4e2df to your computer and use it in GitHub Desktop.
Get and set URL parameters dynamically.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <head><title>locationchange demo</title></head> | |
| <body> | |
| <button onclick="setUrlParam('asdf=' + (i+=i))">Set URL Param</button> | |
| <p id="o"></p> | |
| <script> | |
| i = 100; | |
| const render = _ => { | |
| o.innerHTML = getUrlParam("asdf"); | |
| console.log("Location Changed", i) | |
| }; | |
| onload = _ => { | |
| //setUrlParam will trigger `render` | |
| onLocationChange(render); | |
| }; | |
| const getUrlParam = param => { | |
| const urlArr = document.location.href.split`?`; | |
| const paramArr = urlArr.length > 1 ? urlArr[1].split`&` : []; | |
| const dataPair = paramArr.find(a => a.indexOf(param + "=") === 0); | |
| return dataPair ? dataPair.split`=`[1].replace(/%20/g, " ") : false; | |
| }; | |
| const setUrlParam = param => { | |
| const url = document.location.href.split`?`[0].split`#`[0]; | |
| history.pushState({ param }, param, `${url}${param ? "?" + param : ""}`); | |
| return false; | |
| }; | |
| // Source: https://stackoverflow.com/a/52809105/1675237 | |
| // this enables "locationchange" event across browsers without "navigate" event support | |
| const onLocationChange = method => { | |
| const dispatch = name => dispatchEvent(new Event(name)); | |
| let oldPushState = history.pushState; | |
| history.pushState = function pushState() { | |
| let ret = oldPushState.apply(this, arguments); | |
| dispatch('pushstate'); | |
| dispatch('locationchange'); | |
| return ret; | |
| }; | |
| let oldReplaceState = history.replaceState; | |
| history.replaceState = function replaceState() { | |
| let ret = oldReplaceState.apply(this, arguments); | |
| dispatch('replacestate'); | |
| dispatch('locationchange'); | |
| return ret; | |
| }; | |
| addEventListener('popstate', () => dispatch('locationchange')); | |
| if (method) addEventListener('locationchange', e => method(e)); | |
| }; | |
| </script></body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| onload = _ => { | |
| //setUrlParam will trigger `render` | |
| onLocationChange(render); | |
| }; | |
| const getUrlParam = param => { | |
| const urlArr = document.location.href.split`?`; | |
| const paramArr = urlArr.length > 1 ? urlArr[1].split`&` : []; | |
| const dataPair = paramArr.find(a => a.indexOf(param + "=") === 0); | |
| return dataPair ? dataPair.split`=`[1].replace(/%20/g, " ") : false; | |
| }; | |
| const setUrlParam = param => { | |
| const url = document.location.href.split`?`[0].split`#`[0]; | |
| history.pushState({ param }, param, `${url}${param ? "?" + param : ""}`); | |
| return false; | |
| }; | |
| // Source: https://stackoverflow.com/a/52809105/1675237 | |
| // This enables "locationchange" event across browsers without "navigate" event support | |
| const onLocationChange = method => { | |
| const dispatch = name => dispatchEvent(new Event(name)); | |
| let oldPushState = history.pushState; | |
| history.pushState = function pushState() { | |
| let ret = oldPushState.apply(this, arguments); | |
| dispatch('pushstate'); | |
| dispatch('locationchange'); | |
| return ret; | |
| }; | |
| let oldReplaceState = history.replaceState; | |
| history.replaceState = function replaceState() { | |
| let ret = oldReplaceState.apply(this, arguments); | |
| dispatch('replacestate'); | |
| dispatch('locationchange'); | |
| return ret; | |
| }; | |
| addEventListener('popstate', () => dispatch('locationchange')); | |
| if (method) addEventListener('locationchange', e => method(e)); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment