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.
3 answers
solution1
1 ACCPTED 2014-11-05 01:15:40
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 .
solution2
1 2014-11-05 01:24:29
This way:
var movieName = window.location.hash;
and the URL shall look like
window.open("display.html#42"); // '42' is presumably that movie ID.
solution3
0 2014-11-05 02:19:08
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 ie winnow.open 'display.html'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.