发表新帖
发表新帖

Pass JavaScript variable between two HTML pages

后端 未结
关注
3 1298
野性不改
野性不改 2021-01-25 17:22

I have this html page, that gathers the movie name and stores it in a JavaScript variable.
相关标签:
3条回答
  • 说谎
    2021-01-25 17:46

    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'

    0 讨论(0)
  • 说谎
    2021-01-25 17:54

    This way:

     var movieName = window.location.hash;

    and the URL shall look like

    window.open("display.html#42"); // '42' is presumably that movie ID.
    0 讨论(0)
  • 甜味超标
    2021-01-25 18:05

    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.

    0 讨论(0)
 看不清?
提交回复
热议问题