浅谈在浏览器中打开新窗口时的数据传递问题
来源:互联网 发布:云笔记本 知乎 编辑:程序博客网 时间:2024/05/17 08:27
在网站建设中,经常会遇到的一个需求就是打开一个新窗口,例如笔者在工作中遇到的一个案例就是,有一个表格,由于列数较多,在页面中显示的数目较少,需要滑动滚动条去查看更多列。此时在表格的上方有一个按钮,点击它实现在一个新的窗口打开表格,由于新窗口的页面中只有该表格显示,所以能直接浏览到更多的列表项。
笔者拿到这个案例后,第一个想到的方案就是以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可以在新窗口中获得打开它的父窗口对象,很明显第三种解决方案更加简洁高效。
更多精彩,欢迎访问博主的个人网站。
- 浅谈在浏览器中打开新窗口时的数据传递问题
- 浏览器拦截新窗口打开的问题
- 关于IE不能在新窗口中打开连接的问题
- 在现有窗口中打开新窗口,即target_blank的问题
- 在现有窗口中打开新窗口,即target_blank的问题
- 绝对性解决打开我的电脑-打开文件夹在新窗口中打开问题
- 如何使用默认浏览器在新窗口中打开 URL
- 在IExplore浏览器新窗口中打开http链接
- 在新窗口中打开链接的代码
- js打开新窗口并传递内容的问题
- js打开新窗口并传递内容的问题
- 关于“网页对话框”中链接和表单提交会在新窗口中打开的问题
- 关于“网页对话框”中链接和表单提交会在新窗口中打开的问题
- 关于“网页对话框”中链接和表单提交会在新窗口中打开的问题
- 在form中打开新窗口
- 在新窗口中打开PDF
- 在新窗口中打开网页
- 在新窗口中打开网页
- SpringMVC--DispatcherServlet
- ListView中Item中组件事件的响应
- Cookie
- [BZOJ1800]AHOI2009 FLY
- WebView的基本用法以及和js交互
- 浅谈在浏览器中打开新窗口时的数据传递问题
- 异步处理请求
- 【图像处理】CImage类的简单应用
- Salesforce: How to Send Email with Default Template?
- ADB编译全攻略
- Qt之任务栏系统托盘图标
- [BZOJ1833]ZJOI2010 数字计数|数位DP
- JDBC连接MySQL数据库
- 使用smtplib发送邮件