Execute a function after changing location.href

Question

I want to call a function after redirecting the page.

Inside my function I put a parameter which is an ID but when I check the console it wont display. I know I can be able to run it via on click event but I wont get the ID param from the previous page.

Is there a way to get it done?

Code:

function encode(item_id){
  $('.js-encode').click(function(){
    var url = $(this).data('url');
    location.href = url; // new url
    save(item_id); // call function after new url finish loading
  });
}

function save(item_id){
  console.log(item_id); // check if there's item_id exists
}

because you are redirected in another page. The javascripts in the previous page will not be applied to the new page — Anonymous Duck, Jun 09 '16 at 03:16
add it as query string, for example 'http://newlocation.com?id=' + item_id + — Anonymous Duck, Jun 09 '16 at 03:20
All code below this line `location.href = url` is not executing at all because as soon as this line executes, new page starts to load. It's same as if you enter this URL in browser manually. — Ruslan Stelmachenko, Jun 09 '16 at 03:22
Yeah I checked it. After page load all codes below that line wont execute — claudios, Jun 09 '16 at 03:23
do as @Katana said or alternatively save it in localstorage and retrieve it from there on next page but this too will work only if the both url has same base address. — binariedMe, Jun 09 '16 at 03:23
I get your point guys but how can I call a function after that? — claudios, Jun 09 '16 at 03:32
@RuslanStelmachenko So does the function return or exit early, once `location.href = url` is executed? The JS stops on that page essentially? — Qwerty, Feb 17 '21 at 16:09
@Qwerty yes, JS virtual machine stops execution and browser starts to load new URL. I don't know how it is implemented internally in the JS VM, though. — Ruslan Stelmachenko, Feb 17 '21 at 16:15
@RuslanStelmachenko Interestingly enough, I was able to `setTimeout(console.log, 200, 'hi')` and still see the output in dev tools in some cases. It seems it is [not halted](https://stackoverflow.com/questions/66247829/what-happens-in-the-browser-after-location-href-is-changed) after all. — Qwerty, Feb 18 '21 at 12:46

score 5 · Accepted Answer · edited May 23 '17 at 11:44

I agree with Katana's comment. Anything after your redirect statement will not run because the page itself is redirecting. One way that I would suggest to still get the item_id and get around that barrier, would be to include the item_id in the redirect url as a parameter. Then once on the new page, parse that parameter out of the url and save the item_id.

A great example from Cory Laviska's article on Parsing URLs in Javascript, shows how you can get the individual parameters from a URL.

Building onto Manish' answer:

Function on the current page:

function encode(item_id){
    $('.js-encode').click(function(){
    var url = $(this).data('url');
    location.href = url+'?saved_item_id='+item_id; // new url
    });
}

Function on the REDIRECTED Page (assuming you only have one parameter)

$( document ).ready(function() {
     var url = $(this).data('url');
     var item_id = url.queryKey['saved_item_id'];
     save(item_id);
 });

It may need a few tweeks because I didn't test the code, but hopefully it'll get you on the right track. :)

Hopefully this helps. If it helps and/or answers your question, please select as answer and up vote! :D Feel free to let me know if you have any questions

Thanks for the effort but how can I load save function after the redirect? — claudios, Jun 09 '16 at 03:35

score 2 · Answer 2 · answered Jun 09 '16 at 03:43

2

Try this one

The container is the section of your page where you perform an action.

function encode(item_id){
  $('.js-encode').click(function(){
    var url = $(this).data('url');
    $("#container").load(url,function(){
        // other stuffs and functionalities
         save(item_id); // call function after new url finish loading
    });
  });
}

answered Jun 09 '16 at 03:43

Regs Isabelo Jr.

29
3

Can I pass info from that loaded URL back up to the top level function? – Shadoath Feb 23 '18 at 16:37

score 1 · Answer 3 · answered Jun 09 '16 at 03:26

1

You can try something like this.

function encode(item_id){
  $('.js-encode').click(function(){
    var url = $(this).data('url');
    location.href = url+'?saved_item_id='+item_id; // new url
    //save(item_id); // call function after new url finish loading
  });
}

/*(function save(item_id){
  console.log(item_id); // check if there's item_id exists
}*/

Further more , On New redirected URL you can get item_id which was appended to URL in previous page.

Hope this may help.

answered Jun 09 '16 at 03:26

Manish

247
1
10

I get your point here but how can I call a function after the page loaded? I wanted to call the function after the redirect happened – claudios Jun 09 '16 at 03:35
You can check for saved_item_id for blank or `typeof(saved_item_id) != 'undefined'` If that saved_item_id is not blank or exists, You can just call your function. :-) – Manish Jun 09 '16 at 03:37

Execute a function after changing location.href

3 Answers3

Linked