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

【问题标题】：Pass JavaScript variable between two HTML pages在两个 HTML 页面之间传递 JavaScript 变量
【发布时间】：2014-11-05 10:19:08
【问题描述】：

我有这个 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>

然后它打开这个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 said 'VARIABLE' 是我想要之前定义的 JavaScript 变量的地方。我会感谢您对此的任何帮助，谢谢。

【问题讨论】：

您只能使用PHP 和AJAX 发布它
我已经看到了通过 html 和 Javascript 的其他方式，如 cookie、本地存储等。我知道这是可能的，只是没有遇到任何明确的教程。
查看上一个关于在 javascript 中解析查询字符串的问题：stackoverflow.com/questions/901115/…

标签： javascript jquery html

【解决方案1】：

这边：

 var movieName = window.location.hash;

URL 应该是这样的

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

【讨论】：

【解决方案2】：

如果您不想使用任何服务器端技术，则可以使用查询字符串。在打开新页面时添加电影名称作为查询字符串参数，然后在新页面访问 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>

第二页：

<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>

注意：我自己没有编写 getQueryVariable 函数。归功于link。

【讨论】：

我相信我已经尝试过了，你能告诉我正确的方法吗？
从 javascript 解析查询字符串有点麻烦。
查看 this code 以获取 javascript 中的查询字符串

【解决方案3】：

我只提出这个解决方案，因为有人评论说在 JavaScript 中解析查询字符串有点麻烦......并且鉴于我可以在一行代码中完成你想要的（无需更改程序的任何其余部分）那么多）你可能想考虑这个：

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

将用于读取 `var movieName = getQueryVariable("movieName")' 的那行替换为上面的那行，这就是它的全部内容...

事实上，我的解决方案还允许您重构第一个文件中现在不必要的代码：

将 ≤script≥ TAG 更改为：

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

...正如前面在第二个文件中提到的，≤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：第一个网页必须在它们所在的服务器上具有相同的主机名。它们还必须在同一个端口上提供服务（可能您不需要担心的事情......默认端口 80 在这种情况下似乎占据主导地位）。我认为这不会成为问题，因为您在指定第二页时使用相对寻址，即winnow.open 'display.html'

【讨论】：