问题由来:

在公司遇到一个线上bug,如下

var url = 'http://106.75.31.215:8012/onlinePreview?url=' + encodeURIComponent(fileUrl);

window.open(url, "_blank", "height=" + winHeight
+ ",top=80,left=80,toolbar=no, menubar=no, scrollbars=yes, resizable=yes");

由于 fileUrl 是多张图片的 url 拼装而来,在这里我们使用get请求方式调的后台图片预览接口,发现后台报错 请求头过长。

特此查了下

在IE8 下的URL地址总长度为:4076,超过该长度会自动忽略后面的内容;

在firefox 25下的URL地址总长度可以达到:7530,超过该长度会访问错误;

在chrome 29.0.1547.62 的最大总长度达到:7675,超过该长度会访问错误;

尴尬。。。我们这有一万多的字符。

解决思路:

换post请求啊,不能忍啊,因为post请求理论上没有请求数据的长度限制,但是没这么搞过啊。

解决方案:

好像以前只在form表单里接触过post调用,那么能不能让window.open()先打开一个隐藏的form表单呢?然后把请求数据塞进去,而偷偷的自动提交,不久可以了么。机智啊

实施如下:

var winHeight = window.document.documentElement.clientHeight-10;
var url = 'http://106.75.31.215:8012/picturesPreview';
var formStr = '<form style="visibility:hidden;" method="POST" action="' + url + '">' +
'<input type="hidden" name="urls" value="' + encodeURIComponent(urls) + '" />' +
'<input type="hidden" name="currentUrl" value="' + encodeURIComponent(fileUrl) + '" />'+
'</form>';
var win = window.open("", "_blank", "height=" + winHeight
+ ",top=80,left=80,toolbar=no, menubar=no, scrollbars=yes, resizable=yes");
win.document.body.innerHTML = formStr;
win.document.forms[0].submit();

经测试,可以跑通,完美解决。

如何让window.open()以post请求方式调用(巧妙解法)的更多相关文章

  1. 利用Ajax改变发送请求方式

    由于测试的时候需要模拟Head请求,解决办法:先访问要请求的站点,然后在浏览器的控制台下执行如下代码,请求方式就为参数给的值: var xmlHttp; if (window.ActiveXObjec ...

  2. AJAX中的请求方式以及同步异步的区别

    AJAX中的请求方式以及同步异步的区别请求方式,分为GET与POST: GET 最为常见的HTTP请求,普通上网浏览页面就是GET.GET方式的参数请求直接跟在URL后,以问号开始.(JS中用wind ...

  3. Android之Http通信——3.Android HTTP请求方式:HttpURLConnection

    3.Android HTTP请求方式之HttpURLConnection 引言: 好了,前两节我们已经对HTTP协议进行了学习.相信看完前两节的朋友对HTTP协议相比之前 应该更加熟悉吧.好吧.学了要 ...

  4. 使用Cors在WebApi中实现跨域请求,请求方式为angular的 $http.jsonp

    使用Cors在WebApi中实现跨域请求 第一步,在webapi项目中安装cors 在Web API配置文件中(Global.asax)进行全局配置: public class WebApiAppli ...

  5. 深入理解ajax系列第二篇——请求方式

    前面的话 在上一篇中,概要地介绍了XHR对象的使用.本文将详细介绍使用XHR对象发送请求的两种方式——GET和POST.下面将以实例的形式来详细说明 GET GET是最常见的请求类型,最常用于向服务器 ...

  6. 限制action所接受的请求方式或请求参数

    原文:http://www.cnblogs.com/liukemng/p/3726897.html 2.限制action所接受的请求方式(get或post): 之前我们在HelloWorldContr ...

  7. Android——JDK的get请求方式

    layout文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:an ...

  8. 第二节(RequestMapping请求方式)学习尚硅谷-springmvc视频教程

    项目中,创建测试类SpringMVCTest @Controller @RequestMapping("/springmvc1") public class SpringMVCTe ...

  9. jQuery中ajax的4种常用请求方式

    jQuery中ajax的4种常用请求方式: 1.$.ajax()返回其创建的 XMLHttpRequest 对象. $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数 ...

随机推荐

  1. DG环境的日常巡检

    DG环境的日常巡检 目录 1.DG环境的日常巡检4 1.1.主库环境检查4 1.1.1.主库实例启动状态检查4 1.1.2.主库启动模式检查4 1.1.3.主库DG环境的保护模式检查4 1.1.4.主 ...

  2. 洛谷 [P3254] 圆桌问题

    简单最大流建图 #include <iostream> #include <cstdio> #include <cstring> #include <cmat ...

  3. SPOJ 7258 Lexicographical Substring Search [后缀自动机 DP]

    题意:给一个长度不超过90000的串S,每次询问它的所有不同子串中,字典序第K小的,询问不超过500个. 第一道自己做的1A的SAM啦啦啦 很简单,建SAM后跑kth就行了 也需要按val基数排序倒着 ...

  4. 剑指offer试题(PHP篇一)

    1.二维数组中的查找 题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...

  5. redis主从复制入门案例

    主从复制 特点: 1.master可以拥有多个slave 2.多个slave可以连接同一个master外,还可以连接到其他slave 3.主从复制不会阻塞master,在同步数据时,master可以继 ...

  6. linux使用i/o内存访问外设

    一.linux中访问外设的方法. 1.IO端口(IO port) linux系统给外设分配不同的端口号,linux利用端口号来访问设备(驱动) (cpu x86) cpu访问外设通过端号,访问通过地址 ...

  7. ubunt tftp服务器搭建

    默认安装的Ubuntu系统没有包含TFTP的服务端和客户端,可以通过命令行来下载安装,步骤如下: (1)安装客户端. root@ www.linuxidc.com:~# apt-get install ...

  8. 定制化WinPE

    1 .首先挂载wim Dism /Mount-WIM /WimFile:D:\install.wim /Index: /MountDir:D:\wimmount 2. 如何要修改WinPE的启动项,可 ...

  9. yii2 源码分析Event类分析 (三)

    转载请注明链接:http://www.cnblogs.com/liuwanqiu/p/6739880.html Event是所有事件的基类,它继承Object类 Event类上面的注释的大致意思: * ...

  10. Linux下LNMP启动不了的问题总结(2015.05)

    [1] *****@*****-VirtualBox:~$ sudo /etc/init.d/mysql.server start Starting MySQL * Couldn't find MyS ...