Pass Variable to a Popup Window using Javascript

Question

I need to pass some text from the current page to a popup window without going for a server hit. The information (herewith represented by 90) is already available in the parent form (it's like a paragraph-long text which is stored in a hidden variable). I just need to display that as a popup.

Here's what I've tried, this works to some extent but doesn't work if I pass text, instead of a number. My second concern is that the solution kinda looks ugly. Any tips? Thank you.

This is SCCE, you can run it straight in your machine.

<html>
<head>
<title>A New Window</title>

<script type="text/javascript">
var newWindow;
var data;


function makeNewWindow(param) {
    data = param;

    if (!newWindow || newWindow.closed) {
        newWindow = window.open("","sub","status,height=200,width=300");
        setTimeout("writeToWindow()", 50); /* wait a bit to give time for the window to be created */
    } else if (newWindow.focus) {
        newWindow.focus( ); /* means window is already open*/
    }
}


function writeToWindow() {
    var k = data;
    alert(data);
    var newContent = "<html><head><title>Additional Info</title></head>";
    newContent += "<body><h1>Some Additional Info</h1>";
    newContent += "<scr"+"ipt type='text/javascript' language='javascript'> var localVar; localVar = "+ k +"; document.write('localVar value: '+localVar);</scr"+"ipt>";
    newContent += "</body></html>";
    // write HTML to new window document
    newWindow.document.write(newContent);
    newWindow.document.close( ); // close layout stream
}
</script>
</head>

<body>
<form>
<input type="button" value="Create New Window" onclick="makeNewWindow('90');" />
</form>
</body>
</html>

Actually, I googled and saw some other approach that uses window.opener.document.forms.element, but here, the window has to know in advance what it has to read from the parent. I need to be able to pass it as it will vary:

<textarea rows="15" name="projectcontent" id="projectcontent" cols="87"></textarea>
<a href="javascript:;" onclick="window.open('viewcon.asp', 'my_new_window','toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=625, height=400');"><b>View Content</b></a>

 <head>
 <title>View Project Content</title>
 </head>
 <body>
 <img src="/images/toplogo.jpg"><br/>
<script language="Javascript">
document.write(window.opener.document.forms['yourformname'].elements['projectcontent'].value)
</script>
 <img src="/images/bottomlogo.jpg">
 </body>
 </html>

That's a very dangerous way to use setTimeout. Get rid of the quotation marks and the parentheses! — Derek Henderson
– Derek Henderson, Commented May 22, 2013 at 0:50
How about a modal dialog? window.open is so 90s, and lots of users won't see it anyway due to pop-up blockers. — elclanrs
– elclanrs, Commented May 22, 2013 at 0:56
I'll give points to all answers that make sense.. I promise! — Question Everything
– Question Everything, Commented May 22, 2013 at 0:59
Thanks! I've attached an edit with some code about window.opener, it's a starting point, try it out and see if it gets you going..good luck! — Dory Zidon
– Dory Zidon, Commented May 22, 2013 at 1:06

Dory Zidon · Accepted Answer · 2013-05-22 01:05:03Z

2

use window.opener

From Mozilla Developer Network: When a window is opened from another window, it maintains a reference to that first window as window.opener. If the current window has no opener, this method returns NULL.

https://developer.mozilla.org/en-US/docs/Web/API/window.opener

This way you can have on your original window a callback, and you can notify the window it's load and ready, rather than wait a random delay...

you add a function on the original window:

   window.popupReady = function (callbackToPopup) {
      callbackToPopup(newData);
   }

then the popup can tell the parent window it's ready and pass it a callback to update it with data..

and on the popup try something like:

window.dataReady(newData)
{
   alert(newData);
}

document.addEventListener("load", function() { window.opener.popupReady (dataReady); }

I didn't test this code, but I would take such a path as this should ensure the popupWindow is ready for you and is along the spirit of JavaScript.

edited May 22, 2013 at 1:05

answered May 22, 2013 at 0:57

Dory Zidon

10.8k2 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Question Everything Over a year ago

problem with this, it is how to tell the new window about what to read from parent? please see updated question..

Dory Zidon Over a year ago

callback man..it's the way Js is designed..I'll edit my answer shortly.

Question Everything Over a year ago

If you could give some prototype that runs, this correct answer is yours. Please?! Have no idea about callbacks yet.

Derek Henderson · Accepted Answer · 2013-05-22 01:03:12Z

1

In your onclick attribute you pass '90' to the function, but the function isn't set up to take an argument. So, change the first line of your function like this:

function writeToWindow(data) {

You don't need the global var data; or the local var k = data;, so get rid of them.

And instead of + k + write + data +.

That should do get your data passed.

edited May 22, 2013 at 1:03

answered May 22, 2013 at 0:57

Derek Henderson

9,7364 gold badges46 silver badges72 bronze badges

3 Comments

Dory Zidon Over a year ago

sending direct html / or the timeout with string is very bad..do not do it..pass data, it's much safer..

Derek Henderson Over a year ago

@DoryZidon, there are lots of things wrong with the OP's code, but I am providing a specific answer to a specific question, not linting the code in general.

Dory Zidon Over a year ago

ya I saw your comment too and I agree with it, still, if there is a solution that doesn't involve security risks I be included to suggest it..

Jens Erat · Accepted Answer · 2013-06-29 00:04:16Z

1

Use this code, it works perfectly in all browsers .

#desc = parent text area id
#desc_textarea = popup 

$("#desc_textarea").val(window.opener.$("#desc").val())

edited Jun 29, 2013 at 0:04

Jens Erat

39k16 gold badges86 silver badges99 bronze badges

answered Jun 28, 2013 at 23:43

Ketan Barad

111 bronze badge

Collectives™ on Stack Overflow

Pass Variable to a Popup Window using Javascript

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related