window.open以post方式将内容提交到新窗口


Posted in Javascript onDecember 26, 2012

第一种方式
最近在做web项目,碰到需要跨页面传递参数的功能,就是那种需要把当前页面的内容带到新开的子窗体中,以前的做法是传一个id过去,然后在新窗口中去读数据库的内容。虽然不怎么麻烦,但是如果内容么有在数据库里保存,仅仅是处以拟稿状态时,就不能实现了,用户还常常认为是个bug。考虑采用get的方式传递,把需要的内容都序列化然后,通过url去传,显得很臃肿,而且get的传递内容长度有限制。于是就想到用post的方式传递,问题在于open方法不能设置请求方式,一般网页的post都是通过form来实现的。如果仅仅模拟form的提交方式,那么open方法里那种可设置窗体属性的参数又不能用。最后想办法整了这么一个两者结合的方式,将form的target设置成和open的name参数一样的值,通过浏览器自动识别实现了将内容post到新窗口中。

比较有意思的是直接通过调用form的submit方法不能触发onsubmit事件,查看了帮助文档,必须手动的触发,否则只能看到页面刷新而没有打开新窗口。代码中只传递了一个参数内容,实际可传递多个。
具体代码如下:

<script> 
function openPostWindow(url, data, name) 
{ 
var tempForm = document.createElement("form"); 
tempForm.id="tempForm1"; 
tempForm.method="post"; 
tempForm.action=url; 
tempForm.target=name; 
var hideInput = document.createElement("input"); 
hideInput.type="hidden"; 
hideInput.name= "content" 
hideInput.value= data; 
tempForm.appendChild(hideInput); 
tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); 
document.body.appendChild(tempForm); 
tempForm.fireEvent("onsubmit"); 
tempForm.submit(); 
document.body.removeChild(tempForm); 
} 
function openWindow(name) 
{ 
window.open('about:blank',name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes'); 
} 
</script>

第二种方式
function openWindowWithPost(url,name,keys,values) 
{ 
var newWindow = window.open(url, name); 
if (!newWindow) 
return false; 
var html = ""; 
html += "<html><head></head><body><form id='formid' method='post' action='" + url + "'>"; 
if (keys && values) 
{ 
html += "<input type='hidden' name='" + keys + "' value='" + values + "'/>"; 
} 
html += "</form><script type='text/javascript'>document.getElementById('formid').submit();"; 
html += "<\/script></body></html>".toString().replace(/^.+?\*|\\(?=\/)|\*.+?$/gi, ""); 
newWindow.document.write(html); 
return newWindow; 
}

推荐使用第一种方式,第二种方式测试过程中发现,与日历弹出框冲突,如果子页面上有日历弹出框,则点日历框会不停刷新页面,不会弹出日历框。当然,也可能是我用的日历框的问题。
Javascript 相关文章推荐
在IE中调用javascript打开Excel的代码(downmoon原作)
Apr 02 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
jQuery之排序组件的深入解析
Jun 19 Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 Javascript
Jquery ajax基础教程
Nov 20 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 Javascript
AngularJS中的按需加载ocLazyLoad示例
Jan 11 Javascript
AngularJS上传文件的示例代码
Nov 10 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 #Javascript
jQuery-serialize()输出序列化form表单值的方法
Dec 26 #Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 #Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 #Javascript
Javascript图像处理思路及实现代码
Dec 25 #Javascript
javascript的offset、client、scroll使用方法详解
Dec 25 #Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 #Javascript
You might like
php文字水印和php图片水印实现代码(二种加水印方法)
2013/12/25 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
php 如何禁用eval() 函数实例详解
2016/12/01 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
python实现探测socket和web服务示例
2014/03/28 Python
Python 迭代器工具包【推荐】
2016/05/06 Python
详解Python如何生成词云的方法
2018/06/01 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
pytorch动态网络以及权重共享实例
2020/01/06 Python
Python中import导入不同目录的模块方法详解
2020/02/18 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
python程序输出无内容的解决方式
2020/04/09 Python
如何对python的字典进行排序
2020/06/19 Python
美国知名平价彩妆品牌:e.l.f. Cosmetics
2017/11/20 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
生产部岗位职责范文
2014/02/07 职场文书
关于安全的演讲稿
2014/05/09 职场文书
护士医德医风自我评价
2014/09/15 职场文书
酒店前台岗位职责
2015/04/16 职场文书
小学毕业感言100字
2015/07/30 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
利用nginx搭建RTMP视频点播、直播、HLS服务器
2022/05/25 Servers