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

第一种方式
最近在做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;
}

推荐使用第一种方式，第二种方式测试过程中发现，与日历弹出框冲突，如果子页面上有日历弹出框，则点日历框会不停刷新页面，不会弹出日历框。当然，也可能是我用的日历框的问题。

赞 (0)

相关推荐

  • window.open()实现post传递参数

    在实际项目中,常常遇到这样的需求,即实现子系统页面之间跳转并在新的页面打开,我所在项目组使用的是SSH框架,所以url均为类似****.action,同时还带有两参数(系统ID与系统名称),两个参数被struts拦截后存入session中,在打开的子系统页面中还有个ztree插件实现的树状菜单需要参数系统ID才能初始化,直接使用window.open(url,"_blank"),会使得url长度过长,同时还暴露一些参数.故想改用post方式提交,隐藏提交过程中参数的传递.首先想到aja

  • window.open 以post方式传递参数示例代码

    复制代码 代码如下: //打开新页面并利用post方式传递参数 function openNewPageWithPostData(postAddress,opentype,paramNames,paramValues) { var newWindow = window.open(postAddress,opentype); if (!newWindow) { return false; } var postDataHtml="<html><head></head&g

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

    第一种方式 最近在做web项目,碰到需要跨页面传递参数的功能,就是那种需要把当前页面的内容带到新开的子窗体中,以前的做法是传一个id过去,然后在新窗口中去读数据库的内容.虽然不怎么麻烦,但是如果内容么有在数据库里保存,仅仅是处以拟稿状态时,就不能实现了,用户还常常认为是个bug.考虑采用get的方式传递,把需要的内容都序列化然后,通过url去传,显得很臃肿,而且get的传递内容长度有限制.于是就想到用post的方式传递,问题在于open方法不能设置请求方式,一般网页的post都是通过form来实

  • IE和火狐中模仿Click事件及提交到新窗口总结(asp.net)

    先看一下模拟click事件的代码: 复制代码 代码如下: <a href=http://www.jb51.net target="_blank" id="aa">ok</a> <script> var comment = document.getElementById('aa'); if (document.all) { comment.click(); } else { //火狐,如果<a>中没有定义onclick事

  • ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单实例

    有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改... 一不小心就陷入坑坑洼洼. 这样的话,原来纯ASP.NET MVC绑定的方式,还是可以一用的,因为该方式不用再为那么多js代码烦恼. 不好意思,前面自说自话啊,直接上干货代码了---- Ajax.BeginForm @{ Layout = null; var ajaxOptions = new AjaxOp

  • Spring注解方式防止重复提交原理详解

    Srping注解方式防止重复提交原理分析,供大家参考,具体内容如下 方法一: Springmvc使用Token 使用token的逻辑是,给所有的url加一个拦截器,在拦截器里面用java的UUID生成一个随机的UUID并把这个UUID放到session里面,然后在浏览器做数据提交的时候将此UUID提交到服务器.服务器在接收到此UUID后,检查一下该UUID是否已经被提交,如果已经被提交,则不让逻辑继续执行下去-** 1 首先要定义一个annotation: 用@Retention 和 @Targ

  • 将python依赖包打包成window下可执行文件bat方式

    1. 打开一个记事本,将需要安装的第三方python依赖包写入文件,比如:需要安装urllib3.flask.bs4三个python库(替换成你想要安装的库,每个库之间用空格隔开),输入"python -m pip install ",再输入"urllib3 flask bs4"完成输入后,把记事本命名成requirement,文件名后缀txt改成bat,保存:"python -m pip install "是指使用python运行(需要pyth

  • JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    一.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢? 首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种比较方便的方法: 第一种方法,利用圆和反正切三角函数 如下图所示: 以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限. 代码如下: $(".box").on(&quo

  • js实现将选中内容分享到新浪或腾讯微博

    js实现将选中内容分享到新浪或腾讯微博

    微博如火如荼,大家都选择用微博带来社会化流量,顺便推广产品和网站,几乎所有的网站都有分享到代码,但是还有一种更快捷的分享方式,javascript就可以实现将选定内容轻松分享到新浪微博和腾讯微博,效果图如下: 将选中的内容分享到新浪微博,腾讯微博实现js代码如下: <STYLE> .img_sina_share { DISPLAY: none; CURSOR: pointer; POSITION: absolute } .img_qq_share { DISPLAY: none; CURSOR

  • js使用post 方式打开新窗口

    js中一般新打开窗口很简单直接window.open(url);就可以了, 但是由于我希望传递参数到服务端,而且参数看起来很长一串,而且get方式的提交参数长度是有限制的,因此我有以下需求: 1,js中实现post提交 2,返回的页面在新窗口显示 首先我是这么做的: 复制代码 代码如下: $.ajax({                        type: "POST",                        url: '${contextPath}/analyse/de

  • PHP实现将多个文件中的内容合并为新文件的方法示例

    本文实例讲述了PHP实现将多个文件中的内容合并为新文件的方法.分享给大家供大家参考,具体如下: function test() { $hostdir= iconv("utf-8","gbk","C:\Users\原万里\Desktop\日常笔记") ; //iconv()转换编码方式,将UTF-8转换为gbk,若是报错在gbk后加//IGNORE $filesnames = scandir($hostdir); //scandir() 函数返回指

  • 把html页面的部分内容保存成新的html文件的jquery代码

    复制代码 代码如下: //保存聊天记录到本地 function save_record() { //取得当前日期作为文件名 var time=new Date(); var filename=time.toLocaleDateString(); //获取当前页面部分内容 var record=$("#contentList").html(); //打开新窗口保存 var winRecord=window.open('about:blank','_blank','top=500'); w

随机推荐