javascripttypescripttesting

Can I run a function after navigating to a new page and waiting for that page to finish loading?

I have a script that executes a function following a click event. This function sets cookies and redirects to a new URL. I would like to delay the execution of another function until the new URL has fully loaded. How can I achieve this?

At the moment the script basically looks like this:

function setAndNavigate(event){

    event.preventDefault()

    //code setting cookies

    //navigating to new url
    window.location.href = "http://newurl.com"
}

//click event listener runs the setAndNavigate function
var link = document.getElementById("launch");
link.addEventListener("click", setAndNavigate);

//using navigate event listener to kick off function once page url changes
navigation.addEventListener("navigate", (event) => {
        this.newFunction();
    });

//new function
function newFunction(){
    //new function code
}

I am using the navigate event listener to check for a navigation event and then running the code within that. However, at the moment, the new function runs before the new page has finished loading. I want the code to run on the new page once it has finished loading the UI.

This is a test environment and I don't have access to the application code.

Solution

  • So basisclly you need to change

    navigation.addEventListener("navigate", (event) => {
        this.newFunction();
    });

    to "http://newurl.com" js script files and use

    document.addEventListener('DOMContentLoaded',(event) => {
        this.newFunction();
    })

    DOMContentLoaded event will trigger if your content in "http://newurl.com" page is completely load dont't forget to move

    newFunction();

    to your new page script too.