一、前因

一般我们是用 window.open(url,name,params); 打开新窗口, url 会携带一些参数, 但存在参数过多,引发url 过长截断,无法打开正确窗口, 所以我们需要使用 post 方式来实现新窗口打开。

post 打开新窗口有两种方法:

  • ajax 形式
  • form 表单

备注:

url 为打开窗口链接;

name 为窗口名称;

params 为窗口参数,比如 height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no

参数可参考 http://www.cnblogs.com/stswordman/archive/2006/06/02/415853.html

二、实践

方一 ajax 推荐!

  1. var params = {
  2. name: 'hxy',
  3. desc: 'dahuamao'
  4. };
  5. var win = window.open(); // 放在外面是因为浏览器可能会阻止新打开窗口,放在异步请求外面就ok !!!
  6. $.ajax({
  7. url: '/report/preview',
  8. type: 'post',
  9. data: params,
  10. asyn: false
  11. }).done(function(data) {
  12. var doc = win.document;
  13. doc.write(data); // !!! 关键,接收后端的数据并进行新窗口写入
  14. doc.close();
  15. });

方二 form 形式

  1. // post 提交参数
  2. var params = {
  3. name: 'hxy',
  4. desc: 'dahuamao'
  5. };
  6. var tempForm = $('<form style="display:none;" id="tempForm" method="POST" target="_blank" action="/report/preview"></form>');
  7. $.each(params, function(k,v) {
  8. console.log(k,v);
  9. var hideInput = $('<input name="' + k + '" value=' + v + ' type="hidden"/>');
  10. tempForm.append(hideInput);
  11. });
  12. $('body').append(tempForm);
  13. tempForm.submit();
  14. tempForm.remove();

两种方法后端都一样,以node 后端 为例, 逻辑为 解析 post 请求的参数,并返回模板

  1. var params = this.request.body;
  2. yield this.render('report/index.html', {
  3. name: params.name,
  4. desc: params.desc
  5. });

[js] post 方式打开新窗口的更多相关文章

  1. Post方式打开新窗口

    最近在做一个跟ERP相连的领料网站,用到POST的方法打开新窗口来打印报表 代码转别人的,在这里记一下: javascript代码 function openPostWindow(url, data1 ...

  2. js使用post 方式打开新窗口,隐藏Url参数

    要想在地址栏隐藏url传递的参数,不能直接隐藏,但有几下几个变通的方法. 使用类似Base64编码,将URL参数进行简单加密. 使用框架页; 使用POST方式传递数据; 使用Cookie传递数据; 下 ...

  3. js两种打开新窗口

    1.超链接<a href="http://www.jb51.net" title="脚本之家">Welcome</a> 等效于js代码 ...

  4. js模拟form打开新窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS打开新窗口防止被浏览器阻止的方法

    这篇文章主要介绍了JS打开新窗口防止被浏览器阻止的方法,分析对比了常用方法与改进方法,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考. ...

  6. JS打开新窗口防止被浏览器阻止的方法[转]

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器 ...

  7. js 打开新窗口方式

    之前的项目,有个功能是下载文件,这里只要在浏览器输入 url 就会下载那个文件了.当时我只是简单得使用 window.open ,但是却会被浏览器进行拦截,要手动开启才行,然后就搜索研究其他方法,就看 ...

  8. 浏览器拦截js打开新窗口

    最近做项目时,遇到的问题"想通过javascript在浏览器新标签页或新窗口打开一个新的页面,结果被浏览器大大无情给拦截了"业务需求:前端提交数据到后端,后端返回url,然后在新窗 ...

  9. js 打开新窗口

    以前老是用window.open方法打开浏览器新窗口,但是有的浏览器会阻止打开新窗口,一劳永逸的方式是通过js伪造a标签请求打开新窗口,代码如下: var atag = document.create ...

随机推荐

  1. MyEclipse解决SVN同步冲突问题conflict in the working copy obstructs the current operation

    服务端版本控制软件subversion,客户端是eclipse的插件subclipse.当删除一个东西的时候老是提示错误,说冲突 commit -m "" C:/Users/Adm ...

  2. Java中SimpleDateFormat用法详解

    所有已实现的接口: Serializable, Cloneable SimpleDateFormat 是一个以与语言环境有关的方式来格式化和解析日期的具体类.它允许进行格式化(日期 -> 文本) ...

  3. JS之DOM那些事

    DOM 是 Document Object Model(文档对象模型)的缩写.DOM分为核心DOM.XML DOM.HTML DOM,我们接触的主要是HTML DOM,HTML DOM 定义了所有 H ...

  4. Eclipse导出JavaDoc中文乱码问题解决

    在Eclipse里 export 选 JavaDoc,在向导的最后一页的Extra JavaDoc Options 里填上参数即可 比如项目采用的是UTF-8的编码就填:-encoding UTF-8 ...

  5. 论文笔记 Generative Face Completion

    这篇paper将巧妙地将四个loss函数结合在一起,其中每一个loss的功能不同.但这篇paper不够elegant的地方也是loss太多!在本文中,我采用散文的写作方法谈谈自己对这篇paper的理解 ...

  6. php中的date函数

    一.带零 echo date('Y-m-d');2012-08-08二.不带零 echo date('Y-n-j');2012-8-8

  7. 【Android Developers Training】 106. 创建并检测地理围栏

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  8. 【Android Developers Training】 31. 序言:共享简单数据

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  9. CSS雪碧图自动生成软件

    下载地址 http://www.99css.com/1524/ 包含详细的下载地址.下载步骤以及使用教程 亮点:自动合成雪碧图+自动生成雪碧图background-position代码 简单过程 下载 ...

  10. java的logcat的简单使用

    android.util.Log常用的方法有以下5个:Log.v() Log.d() Log.i() Log.w() 以及 Log.e() .根据首字母对应VERBOSE,DEBUG,INFO, WA ...