0

Is there an onbeforeunload function that i could use on all the browsers?

window.onbeforeunload = function () {/**/}

I have some script that i would like to execute when clicking on a link of my site.

Currently i am using the onclick event based script but this does not execute the full script before the next page loads.So in my browser network it is returning HTTP status cancelled. I would like a function to check if all the calls within this function has been loaded and then the new page should load. Is this possible?

John P.
  • 35
  • 7
  • Yes, the one you mentioned, with all its limits and options: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload – Asons May 02 '17 at 20:26
  • May I also recommend to not build anything that is heavily dependent on such a function, instead use AJAX in the background if you need to keep or save state etc – Asons May 02 '17 at 20:29

2 Answers2

0

You can try window.onunload. But you can't perform redirect inside this callback.

As workaround, inside your click event on the link, you can use a Promise in order to execute your code, use await in order to wait for the Promise resolution, and then perform the click operation. Here a little example:

async function onClickFunction() {
    await new Promise(function(resolve, reject) {
        // here my code  
        resolve();


    }).then(function(data) {
        // here my link action
    });  
}
quirimmo
  • 9,800
  • 3
  • 30
  • 45
  • `await` will not work unless it is an `async` function (`async function onClickFunction() {...}`). Besides, I don't think returning a Promise is what they're looking for. – Adam Mazzarella May 02 '17 at 20:55
  • yeah correct thanks, forgot to add it at the beginning of the function – quirimmo May 02 '17 at 20:56
0

I don't recommend using that event unless you are warning the user that data is not saved or something along those lines.

What will probably work better is to prevent the default action of the link navigating on the click event, then do what you're wanting to do, then redirect the browser once that's done. Example using Jquery:

$("a").click(function (e){
    //stop the link from navigating
    e.preventDefault();

  //do something

  //once something is done, navigate browser
  window.location = $(this).attr("href");
})

jsfiddle example:

https://jsfiddle.net/wpatter6/cgh2knvm/

Will P.
  • 8,437
  • 3
  • 36
  • 45
  • getting the same error as i indicated above. http status cancelled. – John P. May 02 '17 at 20:38
  • What exactly are you doing with that event? If you are calling ajax, you will need to perform the navigation step after the ajax call has been returned, for example in the ajax success event, or using a promise – Will P. May 02 '17 at 20:39
  • i am firing a marketing pixel within this function. It is a JS based pixel which would create an iframe and load the data within it. – John P. May 02 '17 at 20:41
  • iframes can be tricky, but not impossible. You will need to attach to the load event of the iframe's content window and perform the navigation after that event has fired. This SO post may help: http://stackoverflow.com/questions/5788499/jquery-iframe-load-event – Will P. May 02 '17 at 20:43