在两个HTML页面之间传递JavaScript变量

Question

I have this html page, that gathers the movie name and stores it in a JavaScript variable. 我有这个html页面，该页面收集电影名称并将其存储在JavaScript变量中。

<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页面。

<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. 在哪里说'VARIABLE'是我想拥有先前定义的JavaScript变量的地方。 I would apreciate any help on this, thank you. 我希望对此有所帮助，谢谢。

Answer 1

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. 在打开新页面时，然后在新页面访问URL中将影片名称添加为查询字符串参数，以获取此变量。

<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. 注意：我自己还没有编写getQueryVariable函数。 Credit goes to this link . 信誉指向此链接。

Answer 2

This way: 这条路：

 var movieName = window.location.hash;

and the URL shall look like URL看起来像

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

Answer 3

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: 我之所以仅介绍此解决方案，是因为有人评论说，在JavaScript中解析查询字符串有点麻烦...并且鉴于我可以完成想要的内容，而只需要一行代码即可（无需对程序的其余部分进行太多更改）您可能要考虑以下问题：

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... 用上面的那一行替换用于读取`var movieName = getQueryVariable（“ movieName”）'的那一行，就这么简单...

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≥TAG，使其显示为：

<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≥标签将显示为：

<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. CAVEAT：第一个网页所在的服务器必须具有相同的主机名。 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). 它们也必须在相同的端口上使用（可能不需要担心。默认情况下，80端口似乎可以控制）。 I don't think this will be a problem as you use relative addressing in specifying the second page ie winnow.open 'display.html' 我不认为这会成为问题，因为您在指定第二个页面即winnow.open 'display.html'使用了相对寻址

在两个HTML页面之间传递JavaScript变量

问题描述

3 个解决方案

解决方案1
1 已采纳 2014-11-05 01:15:40

解决方案2
1 2014-11-05 01:24:29

解决方案3
0 2014-11-05 02:19:08

在两个HTML页面之间传递JavaScript变量

问题描述

3 个解决方案

解决方案1 1 已采纳 2014-11-05 01:15:40

解决方案2 1 2014-11-05 01:24:29

解决方案3 0 2014-11-05 02:19:08

解决方案1
1 已采纳 2014-11-05 01:15:40

解决方案2
1 2014-11-05 01:24:29

解决方案3
0 2014-11-05 02:19:08