浅谈在浏览器中打开新窗口时的数据传递问题

在网站建设中,经常会遇到的一个需求就是打开一个新窗口,例如笔者在工作中遇到的一个案例就是,有一个表格,由于列数较多,在页面中显示的数目较少,需要滑动滚动条去查看更多列。此时在表格的上方有一个按钮,点击它实现在一个新的窗口打开表格,由于新窗口的页面中只有该表格显示,所以能直接浏览到更多的列表项。
笔者拿到这个案例后,第一个想到的方案就是以get的方式打开一个新页面,把需要生成表格的参数项通过URL传递过去,然后在新窗口中将参数传递到后台,重新获取表格数据并显示。第一步我们需要做的就是设置新窗口的属性,这些参数需要根据实际情况进行相应的设置,示例代码如下:

var settings = ['resizable=yes', 'location=no', 'status=no', 'scrollbars=no', 'titlebar=no', 'toolbar=no', 'width=1000', 'height=600',   'left=100', 'top=100'];
window.open('/popout?param1=a, param2=b', 'newwindow', settings.join());

在新窗口下重新获取表格数据并显示,任务完成。测试人员测试后发现了两个问题,一个就是有些参数中会带有特殊字符,需要对特殊字符做转义,另外一个就是有时传递的参数较长,超过了浏览器对URL最大长度的限制。这两个问题都有可能导致参数被截断,后者传递的值不正确。为了解决这个问题,笔者想到去使用post方法去传递数据,于是就有了下面的代码:

function openWindowWithPostData(url, data, name){
   var tempform = document.createElement("form");
   tempformid = 'form1';
   tempform.method = 'post';
   tempform.action = url;
   tempform.target = name;
   var hideinput = document.createElement('input');
   hideinput.type = 'hidden';
   hideinput.name = 'postdata';
   hideinput.value = data;
   tempform.append(hideinput);
   tempform.attachEvent('onsubmit', function(){
      window.open('about:blank', name, settings.join());
   });
   document.body.appendChild(tempform);
   tempform.fireEvent('onsubmit');
   tempform.submit();
   document.body.removeChild(tempform);
}

这里我们使用的方案是创建一个临时表单,将数据存储到一个hidden类型的input控件上,通过模拟临时表单的提交把数据传递到新窗口中。这种方案打破了get方法的限制,可以传递更多的内容到新窗口中,但缺点就是操作复杂,使用起来较容易出错。我们接下来介绍第三种方案,这种方案的核心思想就是把数据存储到当前页面的window对象的某个属性上,然后在新窗口访问父窗口的该属性,我们假设要传递的数据时json格式的,代码如下:

父窗口:
window['_popdata'] = JSON.stringify(data);
子窗口:
if(window.opener && window.opener['_popdata'] != undefined){
   var data = JSON.parse(window.opener['_popdata']);
   //do some other operations
}

window.opener可以在新窗口中获得打开它的父窗口对象,很明显第三种解决方案更加简洁高效。

更多精彩,欢迎访问博主的个人网站

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值