PDA

Click to See Complete Forum and Search --> : passing variables between windows

cc.shine
11-30-2004, 12:09 PM
My experience with Javascript is severely limited, which is my disclaimer for the following question/problem.

I have to code links that take the user away from our site with a disclaimer and acknowledgement 'speed bump'. A link clicked on our site that leads to another will generate a pop up window with the verbiage and a button. After they click the button, they are redirected to the intended site. I cannot use server-side scripting with the host we use, but I read that variables can be passed between windows utilizing window.name.

I've decided to use an external file because as I refine this procedure, I need to set cookies that allow the user to choose not to display the message again. But at this point I just want to at least figure out how to accomplish this task before I confuse myself with the cookie issue, since I'm as inexperienced with cookies as I am with Javascript.

The external file includes the following code:

function openExt (id) {
if (window.name==link1) {
id="http://www.consumer.gov/"
}

window.open("../scripts/speed-bump.html", "", "toolbar=yes,resizable=yes,location=yes,directories=yes,status=yes,menubar=yes,width=600,height=500,s crollbars=yes,screenX=0,screenY=0,top=0,left=0", id)
}

function go()
{
id=window.name;
window.location=id;
}


The link on our site is coded as follows:

<a href="javascript: openExt(link1)" id="link1">Consumer Info
from the Federal Government</a>


The code on the speed bump page button is:

<input type="button" class="button" value="Ok" onclick="go()" />


Can anyone tell me what I'm doing wrong?
Warren86
11-30-2004, 04:53 PM
Try it this way. No need to transfer any data to your Speed Bump window.

--------- Main document --------------
<HTML>
<Head>
<Script Language=JavaScript>

var popWin = "";
tmpStr = "";

function go(){

window.location = tmpStr;
}

function openSpeedBump(isLink){

tmpStr = isLink;
if (popWin != ""){popWin.close()}
popWin = window.open("SpeedBump.html","pForm","toolbar=0,menubar=0,statusbar=0,scrollbars=1,resizeable=1,width=250,height=200")
window.opener = self;
}

</Script>
</Head>
<Body>
<center>
<br>
<a href=# id='http://www.consumer.gov/' onclick="openSpeedBump(this.id)">Consumer Info From the Federal Government</a>
</center>
</Body>
</HTML>
---------- SpeedBump.html -------------
<HTML>
<Head>
<Title> Speed Bump </Title>
<Script Language=JavaScript>

function openLink(){

window.opener.go();
window.close();
}

</Script>
<Body>
<center>
<h4>Speed Bump</h4>
<br>
<input type=button value="Okay" onclick="openLink()">
</center>
</Body>
</HTML>
7stud
11-30-2004, 06:02 PM
but I read that variables can be passed between windows utilizing window.name.

I've never heard of that method, and it can't work because as soon as the page changes, all the properties of the window object go bye-bye. If you could do that, you wouldn't have to use the 'name' property of the window object, you could just make one up:

window.the_value_I want_to_to_pass_to_the_next_page = "url";

In javascript, you can add a property to any object at will just like that. If you need to, you can send information to another page by appending the information to the url:

htt p://www.consumer.gov/?myinfo=someinformation

On the receiving page, you do this to get the info:

var text = location.search

and in this case that will result in:

text = "?myinfo=someinformation"

Then, you would use a substring function to get everything after the equals sign. However, I don't really see why there is any reason to send any information to the popup. The popup can access any information on the main page using 'opener' to reference the main page.

First, you would never do this:

function openExt (id) {
if (window.name==link1) {
id="htt p://www.consumer.gov/";

because the value you pass to the function is stored in the variable 'id'. If you assign the url to 'id', you overwrite the value in 'id'.

So, let's start with the 1st page:

<a href="htt p://www.consumer.gov/" onclick="return openExt(this)">Consumer Info
from the Federal Government</a>

As far as javascript is concerned, the value of the 'href' attribute is irrelevant because I'm going to prevent the page from going there with some javascript. However, if a user has javascript disabled, and they click on the link, then the only course of action will be to load the href page, so you might as well set the href to the final destination, and then a non javascript user will also be able to get there as well. The 'return' part in red passes the return value of the function openExt() to the onclick event. If you don't have that 'return' word there, it won't matter what the function returns, the onclick event will proceed as normal.

On the page with the above link on it, you are going to link to your external .js file:

<script type="text/javascript" src="somepage.js"></script>

and on "somepage.js", you will have this:

var url; //to store the url sent to the function
function openExt(link)
{

url = link.href; //stores the info in a global variable that will still exist after the function executes

window.open(url + "?my_info=htt p://www.consumer.gov/", "", " toolbar=yes,resizable=yes .....");

return false; //cancels the onclick event for the link
}

function go()
{
opener.location.href=opener.url; //location.href changes the page and opener is the main page.
window.close(); //closes the popup
}

Lastly, your 'speed bump' page:
<html>
<head>
<title></title>


</head>
<body>

<input type="button" class="button" value="Ok" onclick="opener.go()" />
</body>
</html>


COOKIES:

Good basic instructions on setting cookies:
http://www.elated.com/tutorials/programming/javascript/cookies/

if you don't know regex's switch to this tutorial for reading cookies:
http://www.quirksmode.org/js/cookies.html
cc.shine
11-30-2004, 09:37 PM
I've been playing around with the code that Warren posted and it does work - Thanks, Warren!! If the final destination link could open up in the pop up window instead of the parent window that would be even better. After spending a while attempting that, I feel I'm shooting in the dark though. However, I'll keep at it, as I'd like to have our site in the background in case the user wants to switch back over to it.

I read some info on the search method, however I believe that is server scripting (??) and our host doesn't allow that us to venture in that direction. Don't ask - it's supposedly a security issue. I did glean some info from this suggestion, especially in regards to supplying an href, just in case.

Boy do I need to learn javascript! Thanks for the direction.
Warren86
12-01-2004, 04:32 AM
Yes. Okay. I'll post the code to make the destination link apprer in the speedbump window, later today. I'll use the method you mentioned, passing the destination link via window.name. I read your initial post several times and I must have misunderstood, because I thought you wanted the destination link to be in the main window.
Warren86
12-01-2004, 05:15 AM
Try it this way. Notice the id string: www_consumer_gov. Periods cannot be used in a window name string. The id is converted to a valid http link in the Speedbump window.

------------- Main document -------------
<HTML>
<Head>
<Script Language=JavaScript>

var popWin = "";

function openSpeedBump(isLink){

nameStr = isLink;
if (popWin != ""){popWin.close()}
popWin = window.open("SpeedBump.html",nameStr)
}

</Script>
</Head>
<Body>
<center>
<br>
<a href=# id='www_consumer_gov' onclick="openSpeedBump(this.id)">Consumer Info From the Federal Government</a>
</center>
</Body>
</HTML>
------------ SpeedBump.html ------------
<HTML>
<Head>
<Title> Speed Bump </Title>
<Script Language=JavaScript>

var linkStr = "";

function openLink(){

window.location = linkStr;
}

function buildLink(){

linkStr = window.name;
linkStr = linkStr.replace(/_/g,'.')
linkStr = "http://"+linkStr;
}

window.onload=buildLink;

</Script>
<Body>
<center>
<h4>Speed Bump</h4>
<br>
<input type=button value="Okay" onclick="openLink()">
</center>
</Body>
</HTML>
Warren86
12-01-2004, 07:44 AM
This is another way to use the window.name method. The window.name is the ordinal number of an array element. The array contains link strings, and is in the main document.
----------- Main Document ----------------
<HTML>
<Head>
<Script Language=JavaScript>

var popWin = "";

function createArray(){

Links = new Array()
Links[0] = "http://www.consumer.gov";
Links[1] = "http://www.somethingelse.com";
}

function openSpeedBump(isLink){

if (popWin != ""){popWin.close()}
popWin = window.open("SpeedBump.html",isLink);
}

</Script>
</Head>
<Body>
<center>
<a href=# onclick="openSpeedBump(0)"> Consumer Info From the Federal Government </a>
</center>
</Body>
</HTML>
------------ SpeedBump.html------------
<HTML>
<Head>
<Script Language=JavaScript>

var tmpStr = "";

function getArray(){

isNext = window.name;
window.opener.createArray();
tmpStr = window.opener.Links[isNext];
}

function openLink(){

window.location = tmpStr;
}

window.onload=getArray;

</Script>
</Head>
<Body>
<center>
<h4> Speed Bump </h4>
<br>
<input type=button value="Okay" onclick="openLink()">
</Body>
</HTML>
7stud
12-01-2004, 09:41 AM
The first thing you should realize is that there is absolutely no reason to pass any values between your windows.

When you have a main window<-->popup relationship, all the functions and variables on the main page are available to the popup page--so there is no reason to be passing data between pages. The way the popup page refers to those functions and variables on the main page is by using the 'opener' reference. If there is a url on the main page that you want to open in the popup, you can easily access that from the popup. For instance, if a link on your main page is clicked, you can set a global variable(one outside any functions) on the main page equal to the url you want to go to after your 'speed bump' page is displayed:

var url = http://www.consumer.gov;

Then in the popup, you can refer to that url like this:

opener.url

For script inside the popup window, the popup window is refered to using 'window', like this:

window.location.href = ...

For script inside the main window, the popup is refered to like this:

var popWin = window.open("SpeedBump.html","pForm"," toolbar=0,menubar=0, ... );

popWin.location.href = ...
cc.shine
12-03-2004, 03:26 PM
Thanks for all your help, Warren. I used the array code you suggested. I think it will migrate over more easily when I'm ready to code in the cookies.

Thanks again!
Cathy
Warren86
12-03-2004, 03:34 PM
You're welcome. Good luck with your project.
7stud
12-04-2004, 10:22 AM
That's shameful Warren. :(

You led a beginner astray, and then after it was politely pointed out why you were unnecessarily complicating things, you didn't do anything to help her get it correct. That says a lot about your integrity.

cc.shine,

Please consider this code, and notice how much simpler it is than Warren's misguided script. In addition, the following code will also allow users to get to the links should they have javascript disabled, which does include a fairly large percentage of users.



Main page:


<html>
<head><title></title>
<script type="text/javascript" language="javascript">
<!-- Hide from browsers without javascript


var next_page;

function display_message(clicked_link_href)
{
next_page = clicked_link_href;
window.open("message.htm", "", "width=800, height=600, top=100, left=100");
return false; //cancels onclick action so href in link doesn't load in main page
}

// End hiding -->
</script>
</head>
<body>

<a href="http://www.consumer.gov/" onclick="return display_message(this.href)">
Consumer Info From the Federal Government
</a>

</body>
</html>


Speed bump page(message.htm):

<html>
<head><title></title>
<script language="javascript">
<!-- Hide from browsers lacking javascript

function next_page()
{
window.location.href = opener.next_page;
}

// End hiding -->
</script>
</head>
<body>

<div>Warning: Government websites may be hazardous to your health.</div>

<div><input type=button value="OK" onclick="next_page()"></div>

</body>
</html>

Note:

1)There is absolutely no reason to pass variables to the popup window since the variables on the main page are accessible directly using 'opener':

window.location.href = opener.next_page;

That should be the main lesson you learn from this thread.

2)The syntax of each function assigned to 'onclick' in each of the two links is slightly different:

onclick = "return display_message(this.href)"
onclick = "next_page()"

If you want to return false from the called function in order to cancel the onclick event, then for the onclick event to receive the return value from the function, you need to include 'return' before the function name.

3) If a user has javascript disabled, the script won't run, so a popup won't open, and the page specified in the 'href' of the clicked link will open in the main page.
cc.shine
12-06-2004, 03:54 PM
Actually what I've learned from this, aside from window.location.href = opener.next_page;, is not to be wary of programmers with "stud" anywhere in their handle.

Thanks stud7 for the lesson and the help. You'll probably be pleased to know that I changed 60+ links from the code Warren suggested to the less confusing and more condensed version you provided. It definitely makes more sense.

I just hope you're cruising the bulletin boards if I ever need help again!:p
MaxBurke
08-10-2008, 04:38 PM
Hi,

I'm having similar problems with a small bit of code I'm putting together, I've been stuck now for a few days, and was reading 7Studs advice but still can't get this code to work, I've got a feeling the Array and its values arent being passed to the new window.

Just if someone witha fresh est of eyes would be kind enough to point out the really easy mistake I've made lol.


<HTML>

<HEAD>

<TITLE>:: Javascript Project::</TITLE>

</HEAD>


<BODY>

<SCRIPT LANGAUGE = " TEXT/JAVASCRIPT">

<!--

var NumItems;



function computercomponents(id, name, spec, desc, funct)


{

this.id = id;
this.name = name;
this.spec = spec;
this.desc = desc;
this.funct = funct;


}



var Computer = new Array();

Computer[0] = new computercomponents("CPU","Processor","Pentium 4","Intel Pentium 4 2.60GHZ HT","The Central Proccessing Unit");
Computer[1] = new computercomponents("RAM","Memory","1 Gig"," 1 Gig DDR 333 RAM","Random Access Memory","Tempoary Storage space");
Computer[2] = new computercomponents("MOBO","Motherboard","Pentium 4 Socket 478","Asrock Socket 478","PCB Board that connects all components");
Computer[3] = new computercomponents("VGA","Graphics Card","ATI Radeon 9800 8x AGP"," ATI Radeon 9800 Pro 256MB DDR","Delivers 3D Graphics for gaming");
Computer[4] = new computercomponents("HDD1","Hard Drive 1","120 GB","120 Gigabyte IDE Primary Drive","Stores Operating system, work files and programs");
Computer[5] = new computercomponents("HDD2","Hard Drive 2", "150 GB","150 Gigabyte IDE Secondary Drive","Stores work files and programs");
Computer[6] = new computercomponents("DVD1","DVD+RW Drive","DVD + R RW CDR CDRW Drive","Lite-On DVD+RW IDE Drive","Burns data to DVD +R RW CDR CDRW Discs");
Computer[7] = new computercomponents("DVD2","DVD + -RW Drive"," DVD + - R RW CDR CDRW DL Drive","AOpen DVD + - RW DL IDE Drive","Burns data to DVD + - R RW CDR CDRW Discs");
Computer[8] = new computercomponents("OS", "Operating System","Windows Vista Premium SP1","Microsoft Windows Vista Home Premium SP1","Allows access to files, folders and hardware within a GUI");



NumItems = Computer.length;




function MyNewWindow(copmputercomponents, Computer)



{


itemwindow = window.open('','Popup','height=200,width=200');

if (itemwindow != null)


{


var markup = "<HTML><HEAD><TITLE>:: " + this.name + " ::</TITLE></HEAD>";
markup+= "<BODY><TABLE WIDTH='80%'><TR><TD COLSPAN='2'>";
markup+= "<H4><U>" + this.spec + " </U></H4><BR><BR>";
markup+= "<TR><TD><B> Component ID: </B>" + this.id;
markup+= "<TR><TD><B>" + this.name + ": </B>" + this.spec + " ." + this.desc;
markup+= "<TR><TD><B> Info: </B>" + this.funct + "</TABLE>" ;
markup+= "<FORM><INPUT TYPE='button' Value = 'close' onClick = 'window.close();'></FORM></BODY></HTML>";




itemwindow.document.write(markup);

itemwindow.focus();




}


}



var mainpage="";
mainpage+= "<HTML><HEAD><TITLE>:: Computer Specs ::</TITLE><HEAD>";
mainpage+= "<TABLE WIDTH='80%' BORDER='0' CELLPADDING= '3'>";
mainpage+= "<TR><TH COLSPAN ='2' ALIGN='center'> Component ID<TR><TH>Item Description";

for (var i = 0; i < NumItems; i++)

{







mainpage+= "<a href='javascript:window.opener(MyNewWindow(Computer["+ i +"]))'>";
mainpage+= Computer[i].id + "</A>";






mainpage+= "<TD>" + Computer[i].desc;
mainpage+= "</TABLE></BODY></HTML>";


}


document.write (mainpage);






</SCRIPT>


</BODY>


</HTML>

Many Thanks

Max
WebJoel
08-10-2008, 07:01 PM
Max, -you really should not 'hijack' a thread with your problem, -even if it IS similar. If the Original Postee marks the thread "closed", many people whom might help you, will consider the thread, well, resolved, and not even read it. I usually do not bother to read threads marked "resolved", and would miss any 'hijacker' posts.
Worse case scenario: thread gets 'locked' and you won't get any replies/follow-ups anyway. :o

Besides, it is best to start your own thread, for archiving purposes. It may turn out that your problem is not similar and anyone later that SEARCHES archives will not find your post/solution.

In short, -don't be afraid to start your own thread. :)