Library that monitors changes in URL parameters

README.md

What is this?

Library that monitors changes in URL parameters. Demo

When the hash of the URL is changed, the event is fired.

http://www.example.com/index.html#hoge→http://www.example.com/index.html#fuga

document.addEventListener("changeLocation", e => {
    console.log(e.location.hash); //#fuga
});

Parameters are returned as objects.

http://www.example.com/index.html?key1=fuga&key2=piyo

document.addEventListener("changeLocation", e => {
    console.log(e.location.parameters); //{key1: "fuga", key2: "piyo"}
});

How To Use

Demo

const eventHandler = e => {
    console.log(e.location.hash); //#fuga
    console.log("params:", e.location.parameters); //{key1: "fuga", key2: "piyo"}
}

document.addEventListener("changeLocation", eventHandler);

const monitoringLocation = new MonitoringLocation();
monitoringLocation.enable();
monitoringLocation.fireEvent();

Class declarations

You can specify the interval (in milliseconds) for monitoring the URL. The initial value is 100ms.

const monitoringLocation = new MonitoringLocation();

Or

const monitoringLocation = new MonitoringLocation(10);

Enable monitoring

monitoringLocation.enable();

Disable monitoring

monitoringLocation.disable();

Forcibly fire an event

Use this when you want to retrieve parameters when page is opened.

monitoringLocation.fireEvent();

Listener registration

Event type is "changeLocation" Listener's argument contains location. The URL parameter is stored as an object in location.parameters.

document.addEventListener("changeLocation", eventHandler);

function eventHandler(e){
    console.log(e.location.hash); //#fuga
    console.log("params:", e.location.parameters); //{key1: "fuga", key2: "piyo"}
}

Note

When parameters and hash are mixed in URL, please set ** parameter first and hash as last **.

Good example

http://www.example.com/index.html?key1=hoge&key2=fuga#hash

Bad example

http://www.example.com/index.html#hash?key1=hoge&key2=fuga

MonitoringLocation.js

/* Copyright (c) 2018 Sienori All rights reserved.
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

class MonitoringLocation {
    constructor(intervalMS = 100) {
        this.prevHref = location.href;
        this.intervalMS = intervalMS;
    }

    enable() {
        const self = this;
        this.timer = setInterval(() => {
            self.checkLocation()
        }, this.intervalMS);
    }

    disable() {
        clearInterval(this.timer);
    }

    checkLocation() {
        if (this.prevHref != location.href) this.fireEvent();
        this.prevHref = location.href;
    }

    fireEvent() {
        const event = document.createEvent('HTMLEvents');
        event.initEvent('changeLocation', true, false);
        event.location = location;
        event.location.parameters = this.getParams(location.search);

        document.dispatchEvent(event);
    }

    getParams(search) {
        let params = {};
        if (!search.split('?')[1]) return params;

        const keyValues = search.split('?')[1].split('&');
        for (let i of keyValues) {
            params[i.split('=')[0]] = i.split('=')[1];
        }
        return params;
    }
}