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 相关文章推荐
javascript 在网页中的运用(asp.net)
Nov 23 Javascript
JQuery 选择和过滤方法代码总结
Nov 19 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
JS截取url中问号后面参数的值信息
Apr 29 Javascript
javascript对中文按照拼音排序代码
Aug 20 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
node.js读取文件到字符串的方法
Jun 29 Javascript
浅谈JavaScript中小数和大整数的精度丢失
May 31 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
使用node.js搭建服务器
May 20 Javascript
深入理解Vue 单向数据流的原理
Nov 09 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 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的FTP学习(一)
2006/10/09 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
清除js缓存的多种方法总结
2016/12/09 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
在 webpack 中使用 ECharts的实例详解
2018/02/05 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
python清除函数占用的内存方法
2018/06/25 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python生成带有表格的图片实例
2019/02/03 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Python list运算操作代码实例解析
2020/01/20 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
请解释一下webService? 如何用.net实现webService
2014/06/09 面试题
介绍下Java中==和equals的区别
2013/09/01 面试题
2014年元旦促销活动方案
2014/02/22 职场文书
银行委托书范本
2014/09/28 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
门市房租房协议书
2014/12/04 职场文书
python开发人人对战的五子棋小游戏
2022/05/02 Python