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

最新推荐文章于 2023-04-05 15:51:24 发布

yanxk888

最新推荐文章于 2023-04-05 15:51:24 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/yanxk888/article/details/45111437

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在网站建设中，经常会遇到的一个需求就是打开一个新窗口，例如笔者在工作中遇到的一个案例就是，有一个表格，由于列数较多，在页面中显示的数目较少，需要滑动滚动条去查看更多列。此时在表格的上方有一个按钮，点击它实现在一个新的窗口打开表格，由于新窗口的页面中只有该表格显示，所以能直接浏览到更多的列表项。
笔者拿到这个案例后，第一个想到的方案就是以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 &amp;&amp; window.opener['_popdata'] != undefined){
   var data = JSON.parse(window.opener['_popdata']);
   //do some other operations
}

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

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