How to trigger a Javascript event on url change

Question

Currently, I am dealing with an angular project, I need to trigger an event on routing change/URL change from one page to another page (as it is an angular project page wont be refreshed).

I have tried with different scenarios in index.html page like below:

  window.onbeforeunload = function () {
   //not fit;
  });

    window.onhashchange = function () {
    //not fit;
   });

Can we have any other solutions to trigger an event on url change (I don't want to use listeners in angular).

issue is popstate is not triggered when the application alters the history in a single page application. — epascarello, Jan 28 '19 at 14:37
Possible duplicate of [How to detect URL change in JavaScript](https://stackoverflow.com/questions/6390341/how-to-detect-url-change-in-javascript) — Stefan Neubert, Jan 28 '19 at 14:43
Actually, it fires only on back and forward actions right, But in my case need to trigger event on route change or Url change — Mahendra Rao Bandaru, Jan 28 '19 at 14:43
Stefan Neubert, any alternative solution rather than set intervals ? — Mahendra Rao Bandaru, Jan 28 '19 at 14:47

score 0 · Answer 1 · edited Jan 28 '19 at 21:31

0

You can do this by implementing hashchange even on window

And if you are using jQuery, this plugin might help you.

Or in your case check pure JS code

function hashHandler() {
    this.oldHash = window.location.hash;
    this.Check;

    var that = this;
    var detect = function() {
        if(that.oldHash != window.location.hash) {
            alert("HASH CHANGED - new has" + window.location.hash);
            that.oldHash = window.location.hash;
        }
    };

    this.Check = setInterval(function() { detect() }, 100);
}

var hashDetection = new hashHandler();

Pure demo code example for angular with router:

import { Component, OnInit } from '@angular/core'; // I import Location so that I can query the current path
import { Location } from '@angular/common'; // I also import Router so that I can subscribe to events
import { Router } from '@angular/router'; 

@Component(
{ selector: 'app-top-nav', 
  templateUrl: './top-nav.component.html', 
  styleUrls: ['./top-nav.component.scss'] }
)
export class TopNavComponent implements OnInit { 
    route: string; 

    constructor(location: Location, router: Router) { // within our  constructor we can define our subscription
       // and then decide what to do when this event is triggered.
       // in this case I simply update my route string.
       router.events.subscribe((val) => { if(location.path() != '') { this.route = location.path(); } else { this.route = 'Home' } }); 
    } 

    ngOnInit() { 
    } 
}

The above code should work.

edited Jan 28 '19 at 21:31

marc_s

732,580
175
1,330
1,459

answered Jan 28 '19 at 14:42

hotheadhacker

182
10

hotheadhacker, I am using angular routing, so I've tried with the code snippet you have added is triggering the event only on manual edit and reload case and not working on angular route change – Mahendra Rao Bandaru Jan 28 '19 at 15:02
Are you using ng-route? – hotheadhacker Jan 28 '19 at 15:07
Yeah, I am using @angular/router – Mahendra Rao Bandaru Jan 28 '19 at 15:10
Which version of angular? – hotheadhacker Jan 28 '19 at 15:11
We are using V6.1.0 – Mahendra Rao Bandaru Jan 28 '19 at 15:14
I tested this in one of my old angular projects and worked for me hope it works. For you too – hotheadhacker Jan 28 '19 at 15:28
hotheadhacker,Thanks for your help. But here I am asking an event which is related to javascript even i am using angular – Mahendra Rao Bandaru Jan 28 '19 at 15:31
ahh man now i got it i will redefine my old js code and after testing i will change my answer.. It will take some time. Thanks – hotheadhacker Jan 28 '19 at 15:51
Thanks hotheadhacker, I am waiting for it..:) – Mahendra Rao Bandaru Jan 28 '19 at 16:05

How to trigger a Javascript event on url change

1 Answers1