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

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

Can I pass a JavaScript variable to another browser window?

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

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


将代码放入问题中,您可以在父窗口中执行以下操作:

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

或在新窗口中显示以下内容:

1
var myVariable = window.opener.thisIsAnObject;

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


如果这些窗口来自同一安全域,并且您对另一个窗口有引用,可以。

Javascript的open()方法返回对创建的窗口的引用(如果重用现有窗口,则返回现有窗口)。以这种方式创建的每个窗口都将一个属性应用到该窗口,该属性指向创建该窗口的窗口。

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


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

但是,窗口可能会死掉或继续移动,浏览器在处理窗口时会有所不同。在尝试调用窗口之前,请检查窗口(a)仍处于打开状态(!window.closed)和(b)具有您期望的功能。

像字符串之类的简单值很好,但是通常不要在窗口之间传递诸如函数,DOM元素和闭包之类的复杂对象。如果子窗口从其打开器中存储对象,则打开器将关闭,该对象可能会"死"(在某些浏览器中,例如IE),或导致内存泄漏。可能会发生奇怪的错误。


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

  • 饼干
  • localStorage。只要确保您的浏览器支持localStorage,然后执行变量维护权限(添加/删除/删除)即可保持localStorage干净。

  • 可以将消息从"父"窗口传递到"子"窗口:

    在"父窗口"中打开孩子

    1
    2
    3
    4
    5
        var win = window.open(<window.location.href>, '_blank');    
           setTimeout(function(){
                        win.postMessage(SRFBfromEBNF,"*")
                      },1000);
        win.focus();

    根据上下文替换

    在"孩子"里

    1
    2
    3
    4
    5
        window.addEventListener('message', function(event) {
            if(event.srcElement.location.href==window.location.href){
            /* do what you want with event.data */
            }
        });

    if测试必须根据上下文进行更改


    在您的父窗口中:

    1
    2
    var yourValue = 'something';
    window.open('/childwindow.html?yourKey=' + yourValue);

    然后在childwindow.html中:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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查询字符串解析例程。


    您可以轻松地传递变量,并在父窗口中引用事物:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 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!");  
    }

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


    对我来说,以下行不通

    1
    2
    3
    4
    5
    6
    var A = {foo:'bar'};
    var w = window.open("http://example.com");
    w.B = A;

    // in new window
    var B = window.opener.B;

    但这有效(注意变量名)

    1
    2
    3
    4
    5
    6
    var B = {foo:'bar'};
    var w = window.open("http://example.com");
    w.B = B;

    // in new window
    var B = window.opener.B;

    另外,var B应该是全局的。


    您可以将window.name用作Windows之间的数据传输-它也可以跨域工作。没有官方的支持,但是据我了解,跨浏览器实际上可以很好地工作。

    有关此Stackoverflow帖子的更多信息,请点击此处。


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

    1
    2
    3
    4
    5
    6
    7
    8
    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)
        }
    }

    示例调用:

    1
    2
    3
    openWindow("/contact",function(firstname, lastname){
        this.alert("Hello"+firstname+""+lastname);
    },"John","Doe");

    现场例子

    http://jsfiddle.net/rj6o0jzw/1/


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

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

    是的,浏览器清除所有参考。一个窗户。因此,您必须在主窗口上搜索某个类的ClassName或将cookie用作Javascript自制引用。

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


    如果您对创建的窗口具有引用,并且它在同一域中,则window.open()函数也将允许此操作。
    如果在服务器端使用了该变量,则应该使用$ _SESSION变量(假设您正在使用PHP)。


    推荐阅读

      linux命令窗口调出来?

      linux命令窗口调出来?,系统,工具,首页,密码,终端,环境,命令,界面,桌面,图形

      linux命令增加窗口?

      linux命令增加窗口?,系统,环境,工作,位置,地方,时间,终端,首页,密码,图片,lin

      linux窗口命令怎么?

      linux窗口命令怎么?,系统,环境,情况,命令,终端,窗口,快捷键,文件夹,左下角,

      linux下命令行浏览器?

      linux下命令行浏览器?,地址,传播,工具,网站,软件,发行,网址,首次,官网,系统,l

      linux变量释放命令?

      linux变量释放命令?,系统,环境,名称,工具,官网,简介,变量,环境变量,命令,内

      浏览器调用linux命令?

      浏览器调用linux命令?,系统,信息,人工智能,软件,数据,首次,地址,代码,咨询,

      浏览器调用linux命令?

      浏览器调用linux命令?,系统,信息,人工智能,软件,数据,首次,地址,代码,咨询,

      linux多个窗口命令?

      linux多个窗口命令?,工具,系统,命令,首页,技术,情况,终端,窗口,脚本,界面,Lin

      linux移动窗口命令?

      linux移动窗口命令?,工作,系统,地址,命令,目录,信息,文件,管理,路径,操作,Lin

      linux命令窗口退出?

      linux命令窗口退出?,状态,档案,系统,命令,分析,实时,工具,编辑,模式,文件,lin

      linux调出变量的命令?

      linux调出变量的命令?,系统,工作,工具,信息,地址,代码,标准,名称,官网,命令,l

      linux输入命令的窗口?

      linux输入命令的窗口?,系统,电脑,工具,首页,命令,终端,工作,第三,分行,第一,l

      linux复制命令行窗口?

      linux复制命令行窗口?,工作,系统,地址,信息,命令,标准,目录,文件,功能,内容,l

      linux安装浏览器命令?

      linux安装浏览器命令?,官网,系统,平台,网站,管理,设备,咨询,工具,官方网站,

      linux窗口最大化命令?

      linux窗口最大化命令?,系统,管理,时间,工作,地址,信息,命令,代码,名字,通信,l

      linux命令窗口中文?

      linux命令窗口中文?,网上,系统,中文,传播,标的,状态,名称,不了,发行,终端,lin

      linux命令是窗口变小?

      linux命令是窗口变小?,系统,工作,地址,工具,命令,基础,软件,办公,电脑,信息,

      linux弹出窗口的命令?

      linux弹出窗口的命令?,系统,首页,终端,发行,数据,网址,界面,命令,窗口,快捷

      linux管道传递命令?

      linux管道传递命令?,通信,信息,系统,标准,设备,通讯,管道,数据,工具,环境,怎

      linux新建命令窗口?

      linux新建命令窗口?,系统,首页,图片,工具,工作,环境,终端,密码,软件,命令,lin