access JavaScript variable in new window

Question

This is my first JavaScript attempt, so I apologize if things are a little mangled.

I have two html pages (Certificate1.html and Certificate2.html). What I'm trying to do is prompt the user for his/her name on Certificate1.html, then pass that information to Certificate2.html. At this point the user's name will be displayed in a certificate that (s)he can print.

Both html pages reference the same JavaScript file (Certificate1.js). The first page calls passName():

function passName() {
    FirstN = document.frmUserName.inFirstN.value;
    LastN = document.frmUserName.inLastN.value;
   // alert(FirstN); // good
   // alert(LastN); // good
    var Cert = window.open("Certificate2.html");
    Cert.FirstN = FirstN;
    Cert.LastN = LastN;
    //alert(Cert.FirstN); //good
    //alert(Cert.LastN); //good
}

This seems to be working correctly. Where I'm stuck is the function placeName() that Certificate2.html calls. I have it firing onLoad, and I know it's accessing the function correctly (I just stuck an alert in there and it came up). I don't know how to access the FirstN and LastN variables that I passed to Cert in passName(). I've tried document.FirstN but I get "undefined." How can I access the FirstN and LastN variables that I (think I) passed?

Thanks! -Kristin

UPDATE:

Got it!!!

I didn't need to access it via window.opener - I had passed in the variables to the window, so I was able to access them directly.

function placeName() {
    //alert(FirstN);
    document.getElementById("pUserName").innerHTML = FirstN + " " + LastN;
}

Thanks guys!! -Kristin

Oliboy50 · Answer 1 · 2013-04-25T13:02:20.150

3

HTML LocalStorage (HTML5) http://diveintohtml5.info/storage.html

in your first file :

localStorage.setItem("FirstN", document.frmUserName.inFirstN.value);

in the second one :

var FirstN = localStorage.getItem("FirstN");

or simply set Cookies...

http://www.w3schools.com/js/js_cookies.asp

But i think this should be done using PHP or at least not JS

edited Apr 25 '13 at 13:02

answered Apr 25 '13 at 12:56

Oliboy50

2,661
3
27
36

Hi, I'd really prefer not to use PHP (as I'm totally unfamiliar with it), and we don't really need to keep the information anywhere. Once the user gets to Certificate2.html, they can print it, but their name isn't stored or anything. If they want to print another one they need to enter their information again. – kdormuth Apr 25 '13 at 13:11
If you don't want to persist data, PHP is not so necessary indeed. – Oliboy50 Apr 25 '13 at 13:15
I didn't see that you were using `window.open` to open the second page. So maybe StuckAtWork's answer is better for you. – Oliboy50 Apr 25 '13 at 13:23
Except that window.opener.FirstN is still giving me "undefined" =/ – kdormuth Apr 25 '13 at 13:24

score 2 · Answer 2 · edited May 23 '17 at 12:02

2

Use the window.opener object in the new window.

window.opener.FirstN

W3Schools Examples

Can I pass a JavaScript variable to another browser window?

The following works with my setup:

first.html

<html>
 <script>
   var Var1 = "MyStringVar";
   var Var2 = 123;
   var win = window.open("second.html");
 </script>
</html>

second.html

<html>
 <script>
   alert(window.opener.Var1);
   alert(window.opener.Var2);
 </script>
</html>

edited May 23 '17 at 12:02

Community

1
1

answered Apr 25 '13 at 12:50

StuckAtWork

1,613
7
23
37

Thanks for the reply! Can I place this in my separate JavaScript file, or do I need to put it in the Certificate2.html? – kdormuth Apr 25 '13 at 12:54
This assumes that the source window stays open and available. – StuckAtWork Apr 25 '13 at 13:01
Hmmm. OK, I put the following into my Certificate2.html: And again, placeName() is called onLoad. However, the alert is still giving me "undefined." And yes, the first window remains open and available. – kdormuth Apr 25 '13 at 13:05
See edit. Make sure that the variables are declared BEFORE the window.open call. The onLoad function in the second window will still be called very quickly, and it's possible that the variables are not yet set. This is likely what happens with your first attempt, using `Cert.FirstN` etc. If you place an `alert("This makes you wait")` before your `alert(FirstN)` you will likely get FirstN displayed, because the delay allows the variable to be set. – StuckAtWork Apr 25 '13 at 13:31

score 0 · Answer 3 · answered Apr 26 '13 at 13:18

UPDATE:

Got it!!!

I didn't need to access it via window.opener - I had passed in the variables to the window, so I was able to access them directly.

function placeName() {
    //alert(FirstN);
    document.getElementById("pUserName").innerHTML = FirstN + " " + LastN;
}

Thanks guys!! -Kristin

score 0 · Answer 4 · answered Jan 14 '16 at 07:36

In first window file:

window.yourVariable = value;

In second window file:

window.opener.yourVariable

decription : declare yourVariable as global and bind it to parent window. If new window is opened from the parent window, then the data can be accessed from 'window.opener'. Since yourVariable is declared as global, the values of parent window can be accessed from the child window by using 'window.opener.yourVariable'

access JavaScript variable in new window

4 Answers4