window.open父子窗口数据传递问题

在开发的过程中,需要实现对window.open父子窗口进行数据传递的功能,遇到了一些问题。


1.window.open函数


window.open("url","窗口名称","参数字符串")
参数窗口名可以是:_blank,_top,_self等
参数字符串是对生成的窗口属性的设置:如width、height、menubar、scrollbars等,以逗号隔开,如(height=250, width=600,menubar=no, scrollbars=no)

2.简单的参数传递


对于一般的参数传递,我们可以把参数添加到url中,通过get的方式实现参数传递。这种方式对于一般的参数对被访问者可见。参数较小的情况下可行。

3.遇到的问题


在开发中,已经有一些参数通过添加到url的方式传递到子窗口了,但现在需要传递其他一些数据,并且这些数据可能较大,用url的方式可能被截断。(注:需要传递的数据从后台用ajax获取)

4.尝试


4.1 考虑将ajax获取的数据先存放在本地文件,当子页面打开后利用js进行对文件数据的读取。由于js是运行在浏览器上,而不是操作系统上,实际可操作性小。

4.2 考虑利用浏览器对ajax数据进行存储,子页面从浏览器中取数据。尝试利用sessionStorage和localStorage进行数据存储,发现数据在父窗口可存可取,但在子窗口取不出(原因:子窗口打开是一个新的window对象,而sessionStorage和localStorage对象是window的属性对象)

4.3 利用html5的sendMessage函数进行数据传递。实际结果:可行。

5.利用sendMessage函数传递


父窗口打开子窗口:

var popupwin = window.open('configfunc.html?ft=' + encodeURI(ft) + '&name=' + me_name + '&version=' + version + '&fields=' + other_fields, 
        "配置函数", "height=250, width=600, top=50, left=150, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
        
      popupwin.onload = function(e) {
          popupwin.postMessage(functionInfos,"chrome-extension://"+window.location.host);
      }

子窗口接受数据:

document.onreadystatechange = function(e){
    if(document.readyState == 'complete') {
        window.addEventListener('message', function(e){
            var data = e.data;
            fucNames = data;
            console.log("get data from father");
            console.log(fucNames);
            if(fucNames instanceof Array) {
            for (var i in fucNames) {
                    console.log(fucNames[i]);
                    var option = document.createElement('option');
                    option.value = fucNames[i]['funcTemplate'];
                    option.innerHTML = fucNames[i]['funcName'] + '---' + fucNames[i]['version'];
                    selectBox.appendChild(option);
                }
            }
            else {
                console.log(fucNames);
            }
        });
    }
}


postMessage()函数实际上是通过listener监听器实现的。在postMessage函数的参数中,第一个参数是要传递的数据,第二个参数是目标页面的地址。postMessage函数通过第
二个参数获得目标页面的句柄,再将数据传递到目标页面的消息队列中,实现数据异步传输。
注意:postMessage()函数的第二个参数必须要与目标参数的url对应,包括协议。上例中是在chrome插件中打开子窗口,故协议是chrome-extension://
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值