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, May 22 '13 at 00: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, May 22 '13 at 00:56
I'll give points to all answers that make sense.. I promise! — Question Everything, May 22 '13 at 00: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, May 22 '13 at 01:06

Dory Zidon · Answer 1 · 2013-05-22T01:05:03.213

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.

problem with this, it is how to tell the new window about what to read from parent? please see updated question.. — Question Everything, May 22 '13 at 00:58
callback man..it's the way Js is designed..I'll edit my answer shortly. — Dory Zidon, May 22 '13 at 01:00
If you could give some prototype that runs, this correct answer is yours. Please?! Have no idea about callbacks yet. — Question Everything, May 22 '13 at 14:07

Derek Henderson · Answer 2 · 2013-05-22T01:03:12.283

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 '13 at 01:03

answered May 22 '13 at 00:57

Derek Henderson

9,388
4
42
71

sending direct html / or the timeout with string is very bad..do not do it..pass data, it's much safer.. – Dory Zidon May 22 '13 at 00:58
1

@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. – Derek Henderson May 22 '13 at 01:08
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.. – Dory Zidon May 22 '13 at 01:11

score 1 · Answer 3 · edited Jun 29 '13 at 00:04

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 '13 at 00:04

Jens Erat

37,523
16
80
96

answered Jun 28 '13 at 23:43

Ketan Barad

11
1

Pass Variable to a Popup Window using Javascript

3 Answers3

Linked