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

StackOverflow https://stackoverflow.com/questions/87359

  •  01-07-2019
  •  | 
  •  

题

我有一个页面会生成一个弹出浏览器窗口。我在父浏览器窗口中有一个 JavaScript 变量，我想将其传递到弹出的浏览器窗口。

有没有办法做到这一点？我知道这可以在同一浏览器窗口中跨框架完成，但我不确定是否可以跨浏览器窗口完成。

有帮助吗？

解决方案

前提是这些窗口来自同一安全域，并且您有对另一个窗口的引用，是的。

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

然后，任一方都可以使用 DOM（取决于安全性）来访问另一方的属性或其文档、框架等。

其他提示

将代码放入问题中，您可以从父窗口执行此操作：

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

或者从新窗口看这个：

var myVariable = window.opener.thisIsAnObject;

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

是的，脚本可以访问它们所控制的同一域中其他窗口的属性（通常通过 window.open/opener 和 window.frames/parent 获得）。调用另一个窗口上定义的函数通常比直接修改变量更容易管理。

然而，Windows 可能会死掉或继续运行，而浏览器在死机时会以不同的方式处理它。在尝试调用窗口 (a) 之前，请检查窗口 (a) 是否仍处于打开状态 (!window.close)，并且 (b) 是否具有您期望可用的函数。

像字符串这样的简单值很好，但通常在窗口之间传递复杂的对象（例如函数、DOM 元素和闭包）并不是一个好主意。如果子窗口存储其打开器中的对象，则打开器关闭，该对象可能会“死亡”（在某些浏览器中，例如 IE），或导致内存泄漏。可能会出现奇怪的错误。

在窗口之间传递变量（如果您的窗口位于同一域）可以通过以下方式轻松完成：

  1. 饼干
  2. 本地存储。只需确保您的浏览器支持 localStorage，并正确进行变量维护（添加/删除/删除）以保持 localStorage 干净。

在您的父窗口中：

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

您可以轻松传递变量并引用父窗口中的内容：

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

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

在“父窗口”中打开子窗口

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

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

或者，您可以将其添加到 URL 并让脚本语言（PHP、Perl、ASP、Python、Ruby 等）在另一端处理它。就像是：

var x = 10;
window.open('mypage.php?x='+x);

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

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/

您可以使用 window.name 作为窗口之间的数据传输 - 并且它也可以跨域工作。没有官方支持，但据我了解，实际上跨浏览器运行得很好。

有关此 Stackoverflow 帖子的更多信息

是的，浏览器会清除所有引用。对于一个窗户。因此，您必须在主窗口上搜索某个内容的 ClassName 或使用 cookies 作为 Javascript 自制参考。

我的项目页面上有一个收音机。然后你打开收音机，它在弹出窗口中启动，我控制主页上的主窗口链接并显示播放状态，在 FF 中这很容易，但在 MSIE 中一点也不那么容易。但这是可以完成的。

如果您有对创建的窗口的引用，则 window.open() 函数也将允许这样做，前提是它位于同一域中。如果该变量在服务器端使用，您应该使用 $_SESSION 变量（假设您使用的是 PHP）。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top