我可以将 JavaScript 变量传递到另一个浏览器窗口吗？
Posted
技术标签:
【中文标题】我可以将 JavaScript 变量传递到另一个浏览器窗口吗？【英文标题】：Can I pass a JavaScript variable to another browser window? 【发布时间】：2010-09-10 09:12:19 【问题描述】：我有一个页面会生成一个弹出式浏览器窗口。我在父浏览器窗口中有一个 javascript 变量，我想将它传递给弹出的浏览器窗口。
有没有办法做到这一点？我知道这可以在同一个浏览器窗口中跨框架完成，但我不确定是否可以跨浏览器窗口完成。
【问题讨论】：
【参考方案1】：把代码放在这件事上，你可以从父窗口这样做：
var thisIsAnObject = foo:'bar';
var w = window.open("http://example.com");
w.myVariable = thisIsAnObject;
或者这个从新窗口：
var myVariable = window.opener.thisIsAnObject;
我更喜欢后者，因为无论如何您可能都需要等待新页面加载，以便您可以访问其元素或任何您想要的。
【讨论】：
我不明白 foo:'bar'。你能帮我解决这个问题吗？ @MasoudSahabi,var x = foo: 'bar' 只是用于创建对象的紧凑文字语法。同var x = new Object(); x.foo = 'bar';
我正在使用第一个，它在 Chrome 中运行良好，但 IE 似乎在抱怨。而且很难打断点。
这很好，但现在IE10抱怨它，这不是目前跨浏览器兼容的最佳方式。
@7dr3am7，我明白了，我得到“权限被拒绝”。但是如果我使用第二种方法，从新窗口中，它工作正常。【参考方案2】：
如果这些窗口来自同一个安全域，并且您有另一个窗口的引用，是的。
Javascript 的 open() 方法返回对创建的窗口（或现有窗口，如果它重用现有窗口）的引用。以这种方式创建的每个窗口都会应用一个属性“window.opener”，指向创建它的窗口。
然后可以使用 DOM（取决于安全性）来访问另一个的属性，或者它的文档、框架等。
【讨论】：
自从提出这个问题后情况发生了变化。现在还可以在newer browsers 上通过调用window.postMessage 在不同 安全域上的窗口之间传递消息。【参考方案3】：
是的，脚本可以访问它们拥有句柄的同一域中的其他窗口的属性（通常通过 window.open/opener 和 window.frames/parent 获得）。调用另一个窗口上定义的函数通常比直接摆弄变量更容易管理。
但是，窗口可能会死掉或继续运行，并且浏览器会以不同的方式处理它。检查窗口 (a) 是否仍然打开 (!window.closed) 并且 (b) 具有您期望的可用功能，然后再尝试调用它。
字符串之类的简单值很好，但通常在窗口之间传递复杂对象（例如函数、DOM 元素和闭包）并不是一个好主意。如果子窗口从其打开器存储一个对象，然后打开器关闭，该对象可能会“死”（在某些浏览器如 IE 中），或导致内存泄漏。可能会出现奇怪的错误。
【讨论】：
【参考方案4】：在窗口之间传递变量（如果您的窗口在同一个域中）可以通过以下方式轻松完成：
-
Cookie
本地存储。只需确保您的浏览器支持 localStorage，并正确进行变量维护（添加/删除/删除）以保持 localStorage 干净。
【讨论】：
【参考方案5】：可以将消息从“父”窗口传递到“子”窗口：
在“父窗口”中打开子窗口
var win = window.open(<window.location.href>, '_blank');
setTimeout(function()
win.postMessage(SRFBfromEBNF,"*")
,1000);
win.focus();
根据上下文替换的
在'孩子'中
window.addEventListener('message', function(event)
if(event.srcElement.location.href==window.location.href)
/* do what you want with event.data */
);
if 测试必须根据上下文改变
【讨论】：
【参考方案6】：在您的父窗口中：
var yourValue = 'something';
window.open('/childwindow.html?yourKey=' + yourValue);
然后在childwindow.html中：
var query = location.search.substring(1);
var parameters = ;
var keyValues = query.split(/&/);
for (var keyValue in keyValues)
var keyValuePairs = keyValue.split(/=/);
var key = keyValuePairs[0];
var value = keyValuePairs[1];
parameters[key] = value;
alert(parameters['yourKey']);
在解析键/值对时可能需要进行大量错误检查，但我没有将其包括在此处。也许有人可以在以后的答案中提供更具包容性的 Javascript 查询字符串解析例程。
【讨论】：
【参考方案7】：你可以很容易地传递变量和引用父窗口中的东西：
// open an empty sample window:
var win = open("");
win.document.write("<html><body><head></head><input value='Trigger handler in other window!' type='button' id='button'></input></body></html>");
// attach to button in target window, and use a handler in this one:
var button = win.document.getElementById('button');
button.onclick = function()
alert("I'm in the first frame!");
【讨论】：
正如所写，这在人们运行 adblock 等的现实世界中不起作用。通过向 open 添加参数以使其在单独的窗口中打开（而不是选项卡，因为我有 FF配置为做）我能够在Firefox中使用它。但是弹出窗口在 Chrome 中被阻止了。所以它很简单，也很有效，但离可行的解决方案有点远。【参考方案8】：是的，只要两个窗口在同一个域上就可以。 window.open() 函数将返回新窗口的句柄。子窗口可以使用 DOM 元素“opener”访问父窗口。
【讨论】：
【参考方案9】：对我来说以下不起作用
var A = foo:'bar';
var w = window.open("http://example.com");
w.B = A;
// in new window
var B = window.opener.B;
但这有效（注意变量名）
var B = foo:'bar';
var w = window.open("http://example.com");
w.B = B;
// in new window
var B = window.opener.B;
var B 也应该是全局的。
【讨论】：
【参考方案10】：或者，您可以将它添加到 URL 并让脚本语言（php、Perl、ASP、Python、Ruby 等）在另一端处理它。比如：
var x = 10;
window.open('mypage.php?x='+x);
【讨论】：
【参考方案11】：我一直在努力成功地将参数传递给新打开的窗口。 这是我想出的：
function openWindow(path, callback /* , arg1 , arg2, ... */)
var args = Array.prototype.slice.call(arguments, 2); // retrieve the arguments
var w = window.open(path); // open the new window
w.addEventListener('load', afterLoadWindow.bind(w, args), false); // listen to the new window's load event
function afterLoadWindow(/* [arg1,arg2,...], loadEvent */)
callback.apply(this, arguments[0]); // execute the callbacks, passing the initial arguments (arguments[1] contains the load event)
调用示例：
openWindow("/contact",function(firstname, lastname)
this.alert("Hello "+firstname+" "+lastname);
, "John", "Doe");
实例
http://jsfiddle.net/rj6o0jzw/1/
【讨论】：
【参考方案12】：您可以使用window.name 作为窗口之间的数据传输 - 它也可以跨域工作。没有官方支持，但据我了解，实际上跨浏览器效果很好。
More info here on this *** Post
【讨论】：
【参考方案13】：是的，浏览器清除所有参考。一个窗口。因此，您必须在主窗口中搜索某个 ClassName 或使用 cookie 作为 Javascript 自制参考。
我的项目页面上有一台收音机。然后你打开收音机，它在一个弹出窗口中启动，我控制主页上的主窗口链接并显示播放状态，在 FF 中它很容易，但在 MSIE 中根本不那么容易。但可以做到。
【讨论】：
【参考方案14】：window.open() 函数也将允许这样做，如果你有一个对创建的窗口的引用，只要它在同一个域上。 如果变量用于服务器端，您应该使用 $_SESSION 变量（假设您使用的是 PHP）。
【讨论】：
以上是关于我可以将 JavaScript 变量传递到另一个浏览器窗口吗？的主要内容，如果未能解决你的问题，请参考以下文章