alv-c's solution to "Dynamic image request based on url"

I think this should work<\/p>\n

!function(window, history, location) {<\/span>\n    const<\/span> remote<\/span> =<\/span> 'https://pixeldomain.com/'<\/span>;<\/span>\n\n    const<\/span> pushState<\/span> =<\/span> history<\/span>.<\/span>pushState<\/span>;<\/span>\n    history<\/span>.<\/span>pushState<\/span> =<\/span> function<\/span>(<\/span>state<\/span>)<\/span> {<\/span>\n            if<\/span> (<\/span>typeof<\/span> history<\/span>.<\/span>onpushstate<\/span> ==<\/span> &<\/span>quot<\/span>;<\/span>function<\/span>&<\/span>quot<\/span>;)<\/span> {<\/span>\n                    history<\/span>.<\/span>onpushstate<\/span>({<\/span>state<\/span>:<\/span> state<\/span>});<\/span>\n            }<\/span>\n            //<\/span> ... whatever else you want to do<\/span>\n            //<\/span> maybe<\/span> call<\/span> onhashchange<\/span> e<\/span>.<\/span>handler<\/span>\n            return<\/span> pushState<\/span>.<\/span>apply<\/span>(<\/span>history<\/span>,<\/span> arguments<\/span>);<\/span>\n    };<\/span>\n\n\n    const<\/span> log<\/span> =<\/span> ()<\/span> =<\/span>><\/span> {<\/span>\n        const<\/span> current<\/span> =<\/span> encodeURIComponent<\/span>(<\/span>`${<\/span>location<\/span>.<\/span>host<\/span>}<\/span>${<\/span>location<\/span>.<\/span>pathname<\/span>}<\/span>${<\/span>location<\/span>.<\/span>search<\/span>}<\/span>${<\/span>location<\/span>.<\/span>hash<\/span>}<\/span>`);<\/span>\n        const<\/span> url<\/span> =<\/span> `${<\/span>remote<\/span>}<\/span>${<\/span>current<\/span>}.<\/span>gif<\/span>`;<\/span>\n        const<\/span> gif<\/span> =<\/span> document<\/span>.<\/span>createElement<\/span>(<\/span>'img'<\/span>);<\/span>\n        gif<\/span>.<\/span>src<\/span> =<\/span> url<\/span>;<\/span>\n        console<\/span>.<\/span>log<\/span>(<\/span>`Report<\/span> to<\/span> ${<\/span>url<\/span>}<\/span>`);<\/span>\n    }<\/span>\n\n    window<\/span>.<\/span>addEventListener<\/span>(<\/span>'load'<\/span>,<\/span> log<\/span>);<\/span>\n    window<\/span>.<\/span>onhashchange<\/span> =<\/span> history<\/span>.<\/span>onpopstate<\/span> =<\/span> history<\/span>.<\/span>onpushstate<\/span> =<\/span> log<\/span>;<\/span>\n}(<\/span>window<\/span>,<\/span> window<\/span>.<\/span>history<\/span>,<\/span> window<\/span>.<\/span>location<\/span>);<\/span>\n<\/pre><\/div>\n

Here you have to modify the remote<\/code> variable at the top of the code. This should work fine with regular apps
\n Angular, React, Vue apps as you can see it not only listens to hashchange but listens also to HTML5 history change event.<\/p>\n\n

Also, the gif is not inserted into the page so it won't update the DOM and will be a little bit faster. The browser automatically fetches the image even if it's not inserted into the page.<\/p>\n\n

Tell me if you need something else or doesn't work as expected. For example, if you want I could change the part where you have to manually put the remote url, and make it recognize itself based on the <script src=&quot;&quot;><\/code> value<\/p>\n

I think this should work !function(window, history, location) { const remote = 'https://pixeldomain.com/'; const pushState = history.pushState; history.pushState = function(state) { if (typeof history.onpushstate == "function") { history.onpushstate({state: state}); } // ... whatever else you want to do // maybe call onhashchange e.handler return pushState.apply(history, arguments); }; const log = () => { const current = encodeURIComponent(`${location.host}${location.pathname}${location.search}${location.hash}`); const url = `${remote}${current}.gif`; const gif = document.createElement('img'); gif.src = url; console.log(`Report to ${url}`); } window.addEventListener('load', log); window.onhashchange = history.onpopstate = history.onpushstate = log; }(window, window.history, window.location); Here you have to modify the `remote` variable at the top of the code. This should work fine with regular apps Angular, React, Vue apps as you can see it not only listens to hashchange but listens also to HTML5 history change event. Also, the gif is not inserted into the page so it won't update the DOM and will be a little bit faster. The browser automatically fetches the image even if it's not inserted into the page. Tell me if you need something else or doesn't work as expected. For example, if you want I could change the part where you have to manually put the remote url, and make it recognize itself based on the `