Window.Open Java Script Variable

Question

I am trying to pass a javascript variable to a new window that opens, however if i add a name of "_self", the variable will not be passed:

This won't work, appointmentId is undefined:

    var w = window.open("../calendar/appointment.html","_self");
w.appointmentId = appt.id;

This does work:

    var w = window.open("../calendar/appointment.html");
    w.appointmentId = appt.id;

How can I pass a variable using the _self name, so a new tab/window is not opened?

The variables I am passing are huge. They would take up the URL limit. Sorry I didn't specify this earlier.

Thanks

Is it acceptable to open a new tab and close the current one? — Tibos, Mar 27 '14 at 17:09

score 3 · Accepted Answer · answered Mar 27 '14 at 17:12

An alternative is to pass the variable in the querystring.

To redirect:

window.location = "../calendar/appointment.html?appt_id=" + appt.id

On page load:

<script type="text/javascript">
  // http://stackoverflow.com/a/901144/1253312
  function getParameterByName(name) {
      name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
      var regex = new RegExp("[\\?&]" + name + "=([^&#]*)");
      var results = regex.exec(location.search);
      return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
  window.appointmentId = getParameterByName('appt_id');
</script>

I should have mentioned, the variables I am passing are huge. They would take up the URL limit. Sorry I didn't specify — user2816352, Mar 27 '14 at 17:15

score 1 · Answer 2 · edited May 23 '17 at 10:31

An alternate way to do this is via window.location. For example:

window.location = "../calendar/appointment.html"; // this will send the user here in the current window

In addition, variables are typically passed from page-to-page via the use of a QueryString (sometimes known as GET variables). These typically appear after a question mark. In your case, you could pass the variable like this:

window.location = "../calendar/appointment.html?appointmentId=" + appt.id;
// ../calendar/appointment.html?appointmentId=113

You could also pass the variable after a hash mark:

window.location = "../calendar/appointment.html#" + appt.id;
// ../calendar/appointment.html#113

If you go with the second option, then you can read the variable via location.hash. If you pass it via the QueryString, then you can extract the variable back out of the URL as shown in this question:

How can I get query string values in JavaScript?

I should have mentioned, the variables I am passing are huge. They would take up the URL limit. Sorry I didn't specify — user2816352, Mar 27 '14 at 17:15

score 0 · Answer 3 · answered Mar 27 '14 at 17:19

0

window.open can take 3 parameters

https://developer.mozilla.org/en-US/docs/Web/API/Window.open

The second parameter you are passing is the name of the created window. This is why you don't have it inside the window.

window.open(strUrl, strWindowName[, strWindowFeatures])

Information about supported features can be found in the given url.

answered Mar 27 '14 at 17:19

Luketep

181
1
9

I don't follow. How is this relevant. – 000 Mar 27 '14 at 17:20

score 0 · Answer 4 · edited May 23 '17 at 10:26

The reason why the code you posted doesn't work is because when you use _self, the old document gets cleaned up before the new document can be loaded. Thus, there is no moment in time when the two can communicate synchroneously.

This answer for a slightly different question, but with the same root cause gives several asynchronous communication approaches:

Options you can use are :

Adding it as a parameter using the hash tag (second.php#tmpstr=aaaaaa

Using cookies (there is a nice jQuery cookie plugin)

Moving your whole page into a iFrame (not recommended) and redirecting only the main frame.

Note that using the hash tag is slightly better than using the query string suggested by the other answers because your variable will not end up on the request to the server.

score 0 · Answer 5 · answered Mar 27 '14 at 17:23

You can use the browser's session storage.

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage

Before redirecting:

sessionStorage.setItem("appointmentId", appt.id);

Redirect:

window.location = "../calendar/appointment.html";

When appointment.html loads:

window.appointmentId = sessionStorage.getItem("appointmentId");

Window.Open Java Script Variable

5 Answers5