it-swarm.cn

我可以将JavaScript变量传递给另一个浏览器窗口吗?

我有一个页面,它产生一个弹出浏览器窗口。我在父浏览器窗口中有一个JavaScript变量,我想将它传递给弹出的浏览器窗口。

有没有办法做到这一点?我知道这可以在同一个浏览器窗口中的帧之间完成,但我不确定它是否可以跨浏览器窗口完成。

63
Tom Kidd

如果窗口来自同一个安全域,并且您有另一个窗口的引用,那么。

Javascript的open()方法返回对创建的窗口的引用(如果它重用现有窗口,则返回现有窗口)。以这种方式创建的每个窗口都会获得一个应用于它的属性“window.opener”,指向创建它的窗口。

然后,可以使用DOM(取决于安全性)来访问另一个的属性,或其文档,框架等。

39
MarkR

把代码放到这个问题上,您可以从父窗口执行此操作:

var thisIsAnObject = {foo:'bar'};
var w = window.open("http://example.com");
w.myVariable = thisIsAnObject;

或者在新窗口中显示:

var myVariable = window.opener.thisIsAnObject;

我更喜欢后者,因为您可能需要等待新页面加载,以便您可以访问其元素或任何您想要的内容。

94
Victor

是的,脚本可以访问它们具有句柄的同一域中的其他窗口的属性(通常通过window.open/opener和window.frames/parent获得)。调用另一个窗口上定义的函数通常更易于管理,而不是直接调整变量。

但是,Windows可能会死亡或继续运行,浏览器会在不同时处理它。在尝试调用之前,检查窗口(a)是否仍然打开(!window.closed)和(b)具有您期望的功能。

像字符串这样的简单值很好,但通常在窗口之间传递复杂对象(如函数,DOM元素和闭包)并不是一个好主意。如果子窗口从其开启器中存储对象,则开启器关闭,该对象可能变为“死”(在某些浏览器中,如IE),或导致内存泄漏。奇怪的错误随之而来。

7
bobince

在窗口之间传递变量(如果您的窗口在同一个域中)可以通过以下方式轻松完成:

  1. 饼干
  2. localStorage的。只需确保您的浏览器支持localStorage,并执行变量维护(添加/删除/删除)以保持localStorage清洁。
3
Roman M

您可以非常轻松地传递变量并引用父窗口中的内容:

// 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!");   
}
2
knut

可以将消息从“父”窗口传递到“子”窗口:

在'父窗口'打开孩子

    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测试必须根据上下文进行更改

2
Brault Gilbert

在您的父窗口中:

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查询字符串解析例程。

2
Grant Wagner

是的,只要两个窗口位于同一个域中,就可以完成。 window.open()函数将返回新窗口的句柄。子窗口可以使用DOM元素“opener”访问父窗口。

1
Jordan Mack

您可以使用window.name作为Windows之间的数据传输 - 它也可以跨域工作。没有正式支持,但从我的理解,实际上跨浏览器工作得很好。

有关此Stackoverflow帖子的更多信息

0
Brad Parks

或者,您可以将其添加到URL中,让脚本语言(PHP,Perl,ASP,Python,Ruby等)在另一端处理它。就像是:

var x = 10;
window.open('mypage.php?x='+x);
0
Milan Babuškov

我一直在努力成功地将参数传递给新打开的窗口。
这是我提出的:

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/

0
singe3