Pass JavaScript variable between two HTML pages

Question

I have this html page, that gathers the movie name and stores it in a JavaScript variable.

<html>
<SCRIPT LANGUAGE="javascript">
function getMovieName() {
var movieName =  document.getElementById('movieName').value;
window.open("display.html?myVar1=42");
}
</SCRIPT>
<head>
<form onsubmit="return getMovieName();" name="login-form" class="login-form" method="post">
<input id="movieName" type="string" class="Enetr Movie Name" placeholder="Movie Name" />
<input type="submit" name="submit" value="Search" class="button" />
</form>
</head>
</html>

Then it opens up this html page..

<html>
<SCRIPT LANGUAGE="javascript">
window.onload = function(){
    var movieName = VARIABLE
document.getElementById("app").src ="http://xfinitytv.comcast.net/search?query="+movieName+"&limit=1&or=true&resources=odol%2Crovi%2Cvod%2Cest&persona=8644&dacid=12%7C7";
}
</SCRIPT> 
<head>
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 550px;">
<iframe id="app" scrolling="no" src=""target="_top" style="border: 200px none; 
margin-left: -20px; margin-top:-140px; width: 900px;height: 350px;">
</iframe>
</div>
</head>
</html>

Where is says 'VARIABLE' is where I would like to have the previously defined JavaScript variable. I would apreciate any help on this, thank you.

you can only post it using [PHP](http://www.w3schools.com/php/) and [AJAX](http://www.w3schools.com/jquery/jquery_ref_ajax.asp) — Litestone, Nov 05 '14 at 01:11
I have seen other ways through html and Javascript like cookies, local storage, etc. I know its possible, I just haven't come across any clear tutorials. — user3808597, Nov 05 '14 at 01:14
See this previous question on parsing query strings in javascript: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript — Stuart, Nov 05 '14 at 01:24

score 2 · Answer 1 · answered Nov 05 '14 at 01:24

2

This way:

 var movieName = window.location.hash;

and the URL shall look like

window.open("display.html#42"); // '42' is presumably that movie ID.

answered Nov 05 '14 at 01:24

c-smile

26,734
7
59
86

Anuj Yadav · Accepted Answer · 2014-11-05T01:22:57.960

If you do not want to use any server side technology then you can use query string. Add movie name as query string parameter while opening the new page then in new page access URL to fetch this variable.

<html>
<SCRIPT LANGUAGE="javascript">
function getMovieName() {
var movieName =  document.getElementById('movieName').value;
window.open("display.html?myVar1=42&movieName=" + movieName);
}


</SCRIPT>
<head>
<form onsubmit="return getMovieName();" name="login-form" class="login-form" method="post">
<input id="movieName" type="string" class="Enetr Movie Name" placeholder="Movie Name" />
<input type="submit" name="submit" value="Search" class="button" />
</form>
</head>
</html>

Second Page:

<html>
<SCRIPT LANGUAGE="javascript">
window.onload = function(){
    var movieName = getQueryVariable("movieName")
document.getElementById("app").src ="http://xfinitytv.comcast.net/search?query="+movieName+"&limit=1&or=true&resources=odol%2Crovi%2Cvod%2Cest&persona=8644&dacid=12%7C7";
}

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}
</SCRIPT> 
<head>
<div style="border: 3px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 550px;">
<iframe id="app" scrolling="no" src=""target="_top" style="border: 200px none; 
margin-left: -20px; margin-top:-140px; width: 900px;height: 350px;">
</iframe>
</div>
</head>
</html>

Note: I have not written getQueryVariable function myself. Credit goes to this link.

I believe I have tried this already, could you please show me the correct way to do this. — user3808597, Nov 05 '14 at 01:17
It's kind of a hassle to parse the query string from javascript though. — Raphael Serota, Nov 05 '14 at 01:19
Check out [this code](http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript) for getting query strings in javascript — Noah Huppert, Nov 05 '14 at 01:21

score 0 · Answer 3 · answered Nov 05 '14 at 02:19

I only present this solution since somebody commented that parsing query strings in JavaScript is a bit cumbersome...and given that I can accomplish want you want in one line of code (without any of the rest of your program having to change that much) you might want to consider this instead:

var movieName = window.opener.document.getElementById("movieName").value;

Replace the line that used to read `var movieName = getQueryVariable("movieName")' with the one above and that's all there is to it...

in fact my solution allows you to refactor out now unnecessary code in the first file as well:

change the ≤script≥ TAG so it reads:

<SCRIPT LANGUAGE="javascript">
function getMovieName() {
    window.open("display.html?myVar1=42");
}
</SCRIPT>

...and as previously mentioned in the second file the ≤script≥ tag will read:

<SCRIPT LANGUAGE="javascript">
window.onload = function(){
    var movieName = self.opener.document.getElementById("movieName").value;
    document.getElementById("app").src ="http://xfinitytv.comcast.net/search?query="+movieName+"&limit=1&or=true&resources=odol%2Crovi%2Cvod%2Cest&persona=8644&dacid=12%7C7";
}

CAVEAT: The first web page must reside have the same hostname on the server they reside. They must also be served on the same port (probably something you will not need to worry about ..the default port of 80 seems to hold sway in this instance). I don't think this will be a problem as you use relative addressing in specifying the second page i.e. winnow.open 'display.html'

Pass JavaScript variable between two HTML pages

3 Answers3

Linked