在两个HTML页面之间传递JavaScript变量 [英] Pass JavaScript variable between two HTML pages
本文介绍了在两个HTML页面之间传递JavaScript变量的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
$ b
< html>这是一个HTML页面，它收集电影名称并将其存储在JavaScript变量中。
< SCRIPT LANGUAGE =javascript>
函数getMovieName（）{
var movieName = document.getElementById（'movieName'）.value;
window.open（display.html？myVar1 = 42）;
}
< / SCRIPT>
< head>
< form onsubmit =return getMovieName（）; name =login-formclass =login-formmethod =post>
< input id =movieNametype =stringclass =Enetr Movie Nameplaceholder =Movie Name/>
< input type =submitname =submitvalue =Searchclass =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 + &安培;极限= 1&安培;或=真安培;资源= odol％2Crovi％2Cvod％2Cest&安培;角色= 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 =appscrolling =nosrc =target =_ topstyle =border：200px none;
margin-left：-20px; margin-top： - 140px; width：900px; height：350px;>
< / iframe>
< / div>
< / head>
< / html>
在哪里说'VARIABLE'是我希望拥有以前定义的JavaScript变量的地方。我会对此有所帮助，谢谢。
解决方案
如果您不想使用任何服务器端技术，那么您可以使用查询字符串。将电影名称添加为查询字符串参数，同时打开新页面，然后在新页面访问URL中获取此变量。
< html> ;
< SCRIPT LANGUAGE =javascript>
函数getMovieName（）{
var movieName = document.getElementById（'movieName'）.value;
window.open（display.html？myVar1 = 42& movieName =+ movieName）;
}
< / SCRIPT>
< head>
< form onsubmit =return getMovieName（）; name =login-formclass =login-formmethod =post>
< input id =movieNametype =stringclass =Enetr Movie Nameplaceholder =Movie Name/>
< input type =submitname =submitvalue =Searchclass =button/>
< / form>
< / head>
< / html>
第二页：
< HTML>
< SCRIPT LANGUAGE =javascript>
window.onload = function（）{
var movieName = getQueryVariable（movieName）
document.getElementById（app）。src =http://xfinitytv.comcast.net /搜索查询= +的movieName + &安培;极限= 1&安培;或=真安培;资源= odol％2Crovi％2Cvod％2Cest&安培;角色= 8644&安培; DACID = 12％7C7\" ;
}
函数getQueryVariable（变量）
{
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 =appscrolling =nosrc =target =_ topstyle =border：200px none;
margin-left：-20px; margin-top： - 140px; width：900px; height：350px;>
< / iframe>
< / div>
< / head>
< / html>
注意：我自己没有编写getQueryVariable函数。请参阅此链接。
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.
解决方案
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.
这篇关于在两个HTML页面之间传递JavaScript变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
