在两个HTML页面之间传递JavaScript变量
Pass JavaScript variable between two HTML pages
我有一个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说"VARIABLE"是我想要的先前定义的JavaScript变量。我愿意在这方面得到任何帮助,谢谢。
这种方式:
var movieName = window.location.hash;
并且URL看起来像
window.open("display.html#42"); // '42' is presumably that movie ID.
如果您不想使用任何服务器端技术,那么您可以使用查询字符串。在打开新页面时添加电影名称作为查询字符串参数,然后在新页面中访问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函数。这个链接值得称赞。
我之所以提出这个解决方案,是因为有人评论说用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'
相关文章:
- 函数参数中的数据与指定变量之间的任何性能差异
- 全局变量和全局对象的属性之间有什么区别吗
- 在索引.html和应用.js [node.js] 之间共享变量
- 什么是&&在没有if的行中的变量之间
- 在JavaScript中,如何修复元素显示和变量创建之间的初始差异
- 在Knockoutjs中的ViewModels之间共享变量状态
- 在控制器之间传递变量的最佳方式
- 通过变量在两个数字之间切换
- 在函数之间传递javascript变量
- 在aspx页面c#之间传递/引用/发送变量/会话状态
- 在两个浏览器选项卡之间共享变量范围
- Javascript创建函数,以便在其他函数之间共享变量
- 关于node.js/javascript在文件之间共享变量
- AngularJS:如何在控制器之间传递变量
- 使用 AngularJS 在控制器之间传递变量
- 创建一个变量并在页面之间移动时“存储它”,jQuery
- 在 AngularJS 和非 AngularJS 弹出窗口之间共享变量
- 我需要在jQuery函数和AJAX之间获取一个变量
- 在Ember.js中的方法之间共享变量上下文
- 控制器之间变量名和数据的奇怪行为