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中的throttle和debounce浅析
Jun 06 Javascript
自己封装的常用javascript函数分享
Jan 07 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
微信小程序云开发详细教程
May 16 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
Jan 04 Javascript
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
JavaScript实现网页跨年倒计时
Dec 02 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 Undefined index报错的修复方法
2011/07/17 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
symfony表单与页面实现技巧
2015/01/26 PHP
jquery.cvtooltip.js 基于jquery的气泡提示插件
2010/11/19 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
Vue.js学习之过滤器详解
2017/01/22 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
vue 对象添加或删除成员时无法实时更新的解决方法
2019/05/01 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
python的描述符(descriptor)、装饰器(property)造成的一个无限递归问题分享
2014/07/09 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python使用pymongo模块操作MongoDB的方法示例
2018/07/20 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
详解python中的闭包
2020/09/07 Python
自我评价的正确写法
2013/09/19 职场文书
幼儿园教师工作制度
2014/01/22 职场文书
社区庆八一活动方案
2014/02/02 职场文书
《音乐之都维也纳》教学反思
2014/04/16 职场文书
共产党员公开承诺践诺书
2014/05/28 职场文书
服务口号大全
2014/06/11 职场文书
室内趣味活动方案
2014/08/24 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
2015年度信用社工作总结
2015/05/04 职场文书
企业百日安全活动总结
2015/05/07 职场文书
交通安全月活动总结
2015/05/08 职场文书
mysql insert 存在即不插入语法说明
2022/03/25 MySQL