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 相关文章推荐
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
Bootstrap CSS布局之图像
Dec 17 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
Vue常用指令详解分析
Aug 19 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
原生JS实现分页
Apr 19 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
oracle资料库函式库
2006/10/09 PHP
文件系统基本操作类
2006/11/23 PHP
php.ini-dist 和 php.ini-recommended 的区别介绍(方便开发与安全的朋友)
2012/07/01 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
最好用的省市二级联动 原生js实现你值得拥有
2013/09/22 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python绘制雪景图
2019/12/16 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
我的applet原先好好的, 一放到web server就会有问题,为什么?
2016/05/10 面试题
Java面试题:请问一下代码输出是什么
2015/05/27 面试题
Shell编程面试题
2016/05/29 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
聊城大学毕业生自荐书
2014/02/01 职场文书
物流管理专业毕业生自荐信
2014/03/04 职场文书
法定代表人身份证明书
2015/06/18 职场文书
生产实习心得体会范文
2016/01/22 职场文书
html form表单基础入门案例讲解
2021/07/21 HTML / CSS
详解Spring Security如何在权限中使用通配符
2022/06/28 Java/Android