Carrying JavaScript variables from one page to the next

  • Vedette
  • Newbie
  • Newbie
  • Vedette
  • Posts: 7

Post 3+ Months Ago

I was wondering if there was a way that I could carry javascript variables from a script on one page to the next.

The reason I want to do this is I want to use a function/script and I want it to be on one page and half of it in an iframe as well.

Maybe some kind of global file or something (like global.asa) or something.

just fyi, my page is a .php



thanks
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Javascript gives you the ability to communication between frames.

I found this and it looked quiet interesting
http://www.javascripter.net/faq/index.htm

remember that an iframe responds more or less the same as a standard frame (as far as I know)

The php doesn't matter, as long as you ref the js file <script src=filename> or you have the javascript inside the head of the docs that require it, they should be fine.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida
  • Rabid Dog
  • Web Master
  • Web Master
  • User avatar
  • Posts: 3245
  • Loc: South Africa

Post 3+ Months Ago

Sessions don't work in Javascript do they?
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

As a side note, ignoring the iframes, you can rewrite the link href using a javascript onlcick handler) to include get variables onto the urls. Then in php, something like:

PHP Code: [ Select ]
 
echo("<script> var varName=".$_GET['varName'].";</script>");
 
 
  1.  
  2. echo("<script> var varName=".$_GET['varName'].";</script>");
  3.  
  4.  


Or, if you didn't have server side scripting (or didn't want to use it), you can access the get variables from within the javascript, although I don't remember how.

And then of course there is the possibility of using javascript cookies.
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13503
  • Loc: Florida

Post 3+ Months Ago

Rabid Dog wrote:
Sessions don't work in Javascript do they?


Vadette wrote:
Maybe some kind of global file or something (like global.asa) or something.
just fyi, my page is a .php


Only reason I asked :wink:
  • Vedette
  • Newbie
  • Newbie
  • Vedette
  • Posts: 7

Post 3+ Months Ago

The reason i said that i was using php was so that maybe you guys could suggest something that used php and not some other serverside language like asp or something since i wanted to stay away from that.

I'll give you guys the code I have so that you can understand more of what im talking aboutbut i will play around with what you guys posted as well:

(NOTE: i left the code/documentation in there that i got off the website, the script is kinda cool, never really seen it been used that much, I wanted to try it out, maybe the website can give you a better idea of what im trying to do. Ive searched google for some kind of javascript frame or something thatll work, but nothing does.)


Code: [ Select ]

<?php include("../nav/nav.php"); ?>
<?php include("../navigation.php"); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//Dth HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dth">
<html>
<head>
<title>null</title>

<link rel="StyleSheet" type="text/css" href="../style.css">

<script type="text/javascript">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["/images/photos/may404/image1.jpg"]
dynimages[1]=["/images/photos/may404/image2.jpg"]
dynimages[2]=["/images/photos/may404/image3.jpg"]
dynimages[3]=["/images/photos/may404/image4.jpg"]
dynimages[4]=["/images/photos/may404/image5.jpg"]
dynimages[5]=["/images/photos/may404/image6.jpg"]
dynimages[6]=["/images/photos/may404/image7.jpg"]
dynimages[7]=["/images/photos/may404/image8.jpg"]
dynimages[8]=["/images/photos/may404/wimage9.jpg"]
dynimages[9]=["/images/photos/may404/wimage10.jpg"]
dynimages[10]=["/images/photos/may404/image11.jpg"]
dynimages[11]=["/images/photos/may404/image12.jpg"]

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

</script>
</head>


<body>
<div id="dynloadarea" style="width:80px;height:225px"></div>


<!--THIS IS WHAT I WANT TO BE IN A FRAME, SO THAT I CAN MAKE IT SCROLLABLE WITHOUT THE MAIN LARGER PICTURE MOVING-->


<a href="#" onClick="modifyimage('dynloadarea', 0)"><img src="/images/photos/may404/image.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 1)"><img src="/images/photos/may404/image2.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 2)"><img src="/images/photos/may404/image3.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 3)"><img src="/images/photos/may404/image4.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 4)"><img src="/images/photos/may404/image5.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 5)"><img src="/images/photos/may404/image6.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 6)"><img src="/images/photos/may404/image7.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 7)"><img src="/images/photos/may404/image8.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 8)"><img src="/images/photos/may404/image9.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 9)"><img src="/images/photos/may404/image10.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 10)"><img src="/images/photos/may404/wimage11.jpg" class="photo"></a><br>


<a href="#" onClick="modifyimage('dynloadarea', 11)"><img src="/images/photos/may404/image12.jpg" class="photo"></a><br>


</table>

</body>
</html>
  1. <?php include("../nav/nav.php"); ?>
  2. <?php include("../navigation.php"); ?>
  3. <!DOCTYPE HTML PUBLIC "-//W3C//Dth HTML 4.01 Transitional//EN"
  4. "http://www.w3.org/TR/html4/loose.dth">
  5. <html>
  6. <head>
  7. <title>null</title>
  8. <link rel="StyleSheet" type="text/css" href="../style.css">
  9. <script type="text/javascript">
  10. /***********************************************
  11. * Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
  12. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  13. * This notice must stay intact for legal use
  14. ***********************************************/
  15. //Specify image paths and optional link (set link to "" for no link):
  16. var dynimages=new Array()
  17. dynimages[0]=["/images/photos/may404/image1.jpg"]
  18. dynimages[1]=["/images/photos/may404/image2.jpg"]
  19. dynimages[2]=["/images/photos/may404/image3.jpg"]
  20. dynimages[3]=["/images/photos/may404/image4.jpg"]
  21. dynimages[4]=["/images/photos/may404/image5.jpg"]
  22. dynimages[5]=["/images/photos/may404/image6.jpg"]
  23. dynimages[6]=["/images/photos/may404/image7.jpg"]
  24. dynimages[7]=["/images/photos/may404/image8.jpg"]
  25. dynimages[8]=["/images/photos/may404/wimage9.jpg"]
  26. dynimages[9]=["/images/photos/may404/wimage10.jpg"]
  27. dynimages[10]=["/images/photos/may404/image11.jpg"]
  28. dynimages[11]=["/images/photos/may404/image12.jpg"]
  29. //Preload images ("yes" or "no"):
  30. var preloadimg="yes"
  31. //Set optional link target to be added to all images with a link:
  32. var optlinktarget=""
  33. //Set image border width
  34. var imgborderwidth=0
  35. //Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
  36. var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
  37. ///////No need to edit beyond here/////
  38. if (preloadimg=="yes"){
  39. for (x=0; x<dynimages.length; x++){
  40. var myimage=new Image()
  41. myimage.src=dynimages[x][0]
  42. }
  43. }
  44. function returnimgcode(theimg){
  45. var imghtml=""
  46. if (theimg[1]!="")
  47. imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
  48. imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
  49. if (theimg[1]!="")
  50. imghtml+='</a>'
  51. return imghtml
  52. }
  53. function modifyimage(loadarea, imgindex){
  54. if (document.getElementById){
  55. var imgobj=document.getElementById(loadarea)
  56. if (imgobj.filters && window.createPopup){
  57. imgobj.style.filter=filterstring
  58. imgobj.filters[0].Apply()
  59. }
  60. imgobj.innerHTML=returnimgcode(dynimages[imgindex])
  61. if (imgobj.filters && window.createPopup)
  62. imgobj.filters[0].Play()
  63. return false
  64. }
  65. }
  66. </script>
  67. </head>
  68. <body>
  69. <div id="dynloadarea" style="width:80px;height:225px"></div>
  70. <!--THIS IS WHAT I WANT TO BE IN A FRAME, SO THAT I CAN MAKE IT SCROLLABLE WITHOUT THE MAIN LARGER PICTURE MOVING-->
  71. <a href="#" onClick="modifyimage('dynloadarea', 0)"><img src="/images/photos/may404/image.jpg" class="photo"></a><br>
  72. <a href="#" onClick="modifyimage('dynloadarea', 1)"><img src="/images/photos/may404/image2.jpg" class="photo"></a><br>
  73. <a href="#" onClick="modifyimage('dynloadarea', 2)"><img src="/images/photos/may404/image3.jpg" class="photo"></a><br>
  74. <a href="#" onClick="modifyimage('dynloadarea', 3)"><img src="/images/photos/may404/image4.jpg" class="photo"></a><br>
  75. <a href="#" onClick="modifyimage('dynloadarea', 4)"><img src="/images/photos/may404/image5.jpg" class="photo"></a><br>
  76. <a href="#" onClick="modifyimage('dynloadarea', 5)"><img src="/images/photos/may404/image6.jpg" class="photo"></a><br>
  77. <a href="#" onClick="modifyimage('dynloadarea', 6)"><img src="/images/photos/may404/image7.jpg" class="photo"></a><br>
  78. <a href="#" onClick="modifyimage('dynloadarea', 7)"><img src="/images/photos/may404/image8.jpg" class="photo"></a><br>
  79. <a href="#" onClick="modifyimage('dynloadarea', 8)"><img src="/images/photos/may404/image9.jpg" class="photo"></a><br>
  80. <a href="#" onClick="modifyimage('dynloadarea', 9)"><img src="/images/photos/may404/image10.jpg" class="photo"></a><br>
  81. <a href="#" onClick="modifyimage('dynloadarea', 10)"><img src="/images/photos/may404/wimage11.jpg" class="photo"></a><br>
  82. <a href="#" onClick="modifyimage('dynloadarea', 11)"><img src="/images/photos/may404/image12.jpg" class="photo"></a><br>
  83. </table>
  84. </body>
  85. </html>
  • Vedette
  • Newbie
  • Newbie
  • Vedette
  • Posts: 7

Post 3+ Months Ago

Rabid Dog,
I checked out that site, but the only place i could think of where that thing you were talking about was under the "Frames" section and i could see anything that had to do with that.

rtm223,

Now that I think of it, that PHP get variables thing won't work (i may be wrong though), cause i still want the variables to be within javascript, but i was thinking of something along those lines, although google contains nothing that i can find on it.



thanks for your guys' effort so far.
  • Cafu
  • Student
  • Student
  • Cafu
  • Posts: 97

Post 3+ Months Ago

Vedette wrote:
I was wondering if there was a way that I could carry javascript variables from a script on one page to the next.

The reason I want to do this is I want to use a function/script and I want it to be on one page and half of it in an iframe as well.

thanks


I'm not sure I understand what you want to do.

When you say "a script on one page to the next" are you talking about the page and the page in the iframe?

if you just want to call the function in main page from the iframe use parent.modifyimage('dynloadarea', 2)

if not, which variables are you trying to pass?

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 150 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.