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 = ";
}

//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.

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"
}

//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.

• javascript
• typescript
• testing

Share Improve this question Follow asked Nov 20, 2024 at 12:09 Kieran MKieran M 46177 silver badges1717 bronze badges 2

• I assume this is all on the same origin? If so, use an iFrame and trigger onload of that – mplungjan Commented Nov 20, 2024 at 12:45
• on the new page check the cookies (or querystring or localStorage) and if condition is right then execute newFunction() which must be defined in the new page. – IT goldman Commented Nov 20, 2024 at 13:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

So basisclly you need to change

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

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

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

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

newFunction();

to your new page script too.