When is window.location.href = url gets executed?

Question

For the following code

window.location.href = url;
$(window.document.body).append(compiledTemplate);

I want $(window.document.body).append(compiledTemplate); to be appended on the new Page which will get opened, but it appends thecompiledTemplate` in the existing window then loads the url specified

Is there a way to do that. ?

Note: url to be passed already has its Form load event defined. I do not want to override it.

If I understand correctly, why not simply have two scripts, one on the current page (to change to the new page) and one on the new page (to append the content). — LSD, Jan 28 '15 at 11:04
This is not possible. You cannot directly amend the state of a subsequent page from the current. You could however send the information via the querystring, use localStorage or a cookie, or retrieve it from a server-side database. The next page could then act on that information. — Rory McCrossan, Jan 28 '15 at 11:05
If you want to change the contents of `document.body` and the URL visible in the browser you should look at `history.pushState()` — pawel, Jan 28 '15 at 11:08

T.J. Crowder · Answer 1 · 2015-01-28T11:09:00.457

When is window.location.href = url gets executed?

Very close to immediately. It tells the browser to start the process of loading the new page. The current page, and the code on it, will continue to run until the new page starts loading. More below.

I want $(window.document.body).append(compiledTemplate); to be apended on the new Page which will get open.

You can't. The code in the current page cannot act on the next page. To act on the next page, you have to have your code in that page.

Your best bet is to have the current page supply information to the new page in some other way:

Via a query string parameter
Via local storage or session storage
Via a cookie (blech)

...and then have code on the new page append the content.

If you're doing this in response to a user-generated event, you might be able to do this instead:

var wnd = window.open(url);
$(wnd).load(function() {
    $(this).append(compiledTemplate);
});

...but it would open the URL in a new page (probably a new tab) and leave the current window open, and it would only work for pages from the same origin.

For instance, if you had this on a page: Live Example

<input type="button" id="the-button" value="Click">
<script>
  (function() {
    "use strict";

    $("#the-button").click(function() {
      var counter = 1;

      location.href = "http://stackoverflow.com";
      $("<p>Set, counter = " + counter + "</p>").appendTo(document.body);
      setInterval(function() {
        ++counter;
      $("<p>Counter = " + counter + "</p>").appendTo(document.body);
      }, 50);
    });
  })();
</script>

When you clicked the button, you'd see the code after the line setting location.href run, showing "Set, counter = 1" and then probably several more "counter = x" lines, and then eventually the page would be replaced by Stack Overflow. At that point, the code of the old page has been terminated. It can't do anything to the new page.

While the current code cannot act on the next page, if he is simply moving across his same domain, he could consider using ajax requests to better control the loading of data. So instead of using a window location change, simply load the data using ajax and then append the content. Would probably make it lighter than loading two full pages. — LSD, Jan 28 '15 at 11:11
used var wnd = window.open(url); $(wnd).load(function() { $(this).append(compiledTemplate); }); still appends the the template on the same page not on the new window open — Rohit Kumar, Jan 28 '15 at 11:37

When is window.location.href = url gets executed?

1 Answers1