No internet connection
  1. Home
  2. Issues

Is there a way to detect page loaded event when navigating topics

By Sandor Turanszky @sandorTuranszky2019-04-07 10:58:35.734Z

I have a custom JS code that adds a link text when a page is loaded.
On full page load, I can listen to the DOMContentLoaded event, but when it comes to navigating, none of the browser history events is fired therefore I need to listen to all clicks events, filter links and rely on setTimeout which is a very hacky solution.

Maybe there is a hook that I can use to make changes to the page when it is loaded. In the dev console, I can see:

Loading page: /-22/is-nodejs-a-programming-language [TyMLDPG]
Done loading /-22/is-nodejs-a-programming-language, updating store...
Done updating store.

so the Done updating store seems to be what I need. Any suggestion, please?

Solved in post #4, click to view
  • 4 replies
  1. KajMagnus @KajMagnus2019-04-08 06:23:13.780Z

    This isn't really supported currently, however, there's this hack you can do: (and the below function, loadPageJson, is the one that logs the message you noticed)

    debiki2.Server.loadPageJson = function(path, origOnDone) {
      origLoadPageJson(path, function(response) {
        origOnDone(response);
        // setTimeout so your code won't run until after page updated.
        setTimeout(function() { console.log("*** Loaded new page: " + path + ", your own code here ***"); });
      });
    }
    

    This monkey-patches the function that loads new pages, and runs your own code, after the new JSON has been loaded and the page updated.

    However this is fragile. The name debiki2 is old, it'll change to maybe talkyard, and then your code will break. Also, it'll break if I change the internal implementation of loadPageJson. Or some time in the distant future, when json is cached, browser side, and not always loaded from the server.

    This could perhaps work, though, as a temporary hack? And then maybe there could be an officially supported callback, for navigation events?

    An alternative could be to monkey-patch history.pushState:

    var origPushState = history.pushState;
    history.pushState = function() {
      console.log("Loading new page, arguments: " + JSON.stringify(arguments));
      origPushState.apply(history, arguments);
    };
    

    However pushState happens before the JSON for the new page has been loaded and the new page actually shown.


    What's your use case?

    JS code that adds a link text when a page is loaded

    Maybe you'd like to post a screenshot? I'm having a hard time imagining how this looks / works :- )

    1. SSandor Turanszky @sandorTuranszky2019-04-08 06:36:55.671Z

      Here is the screenshot

      So what I am doing is adding an "Upvote" text to make it clear what the icon button does as I want people to upvote topics. The more clear it is the better :)

      The ideal would be to have an official callback. Until then it makes little sense to implement hacky solutions because I will clearly point out to users that they need to upvote questions. I will add an image and it is going to be very confusing if at some point the image will look different from what they actually see. So I'd rather explain using the existing look and feel.

      Maybe it is easier to customize text (and maybe the icon) for some links through settings. But it has a limited use case though.

      1. KajMagnus @KajMagnus2019-04-08 07:26:05.701Z

        Thanks for the explanation. This can be done with CSS:

        .dw-p-as .icon-heart::after {
            content: "Upvote";
            color: hsl(0, 0%, 37%);
            margin-left: 5px;
            opacity: 1;
        }
        

        results in:

        ReplySolution
        1. SSandor Turanszky @sandorTuranszky2019-04-08 07:32:46.914Z

          You are right, this a good solution!