首页 > web前端 > js教程 > 正文

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

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

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

<script> <BR>function openPostWindow(url, data, name) <BR>{ <BR>var tempForm = document.createElement("form"); <BR>tempForm.id="tempForm1"; <BR>tempForm.method="post"; <BR>tempForm.action=url; <BR>tempForm.target=name; <BR>var hideInput = document.createElement("input"); <BR>hideInput.type="hidden"; <BR>hideInput.name= "content" <BR>hideInput.value= data; <BR>tempForm.appendChild(hideInput); <BR>tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); <BR>document.body.appendChild(tempForm); <BR>tempForm.fireEvent("onsubmit"); <BR>tempForm.submit(); <BR>document.body.removeChild(tempForm); <BR>} <BR>function openWindow(name) <BR>{ <BR>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'); <BR>} <BR></script>

第二种方式
复制代码 代码如下:

function openWindowWithPost(url,name,keys,values)
{
var newWindow = window.open(url, name);
if (!newWindow)
return false;
var html = "";
html += "
";
if (keys && values)
{
html += "";
}
html += "

推荐使用第一种方式,第二种方式测试过程中发现,与日历弹出框冲突,如果子页面上有日历弹出框,则点日历框会不停刷新页面,不会弹出日历框。当然,也可能是我用的日历框的问题。
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板