问题由来:

在公司遇到一个线上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. CentOS7安装MySQL的方法之通用二进制格式

      CentOS7安装MySQL的方法之通用二进制格式          

  2. SpringMVC源码情操陶冶-DispatcherServlet类简析(一)

    阅读源码有利于陶冶情操,此文承接前文SpringMVC源码情操陶冶-DispatcherServlet父类简析 注意:springmvc初始化其他内容,其对应的配置文件已被加载至beanFactory ...

  3. Using Custom Domains With IIS Express In Asp.Net Core

    IIS Express是一个Mini版的IIS,能够支持所有的Web开发任务,但是这种设计有一些缺陷,例如只能通过localhost:<port>的方式来访问我们的应用程序,看起来就有点不 ...

  4. 数据分析之pandas教程------数据处理

    目录 1  数据合并 1.1  实现数据库表join功能 1.2  实现union功能 2  数据转换 2.1  轴旋转 2.2  数据转换 2.2.1  去重 2.2.2  对某一列运用函数 2.2 ...

  5. Google chrome浏览器中通过扩展调用本地应用程序以及和程序相互通讯(C++)

    最近项目用到浏览插件的开发,IE用到的是BHO,chrome打算做成扩展. 但是和ie有一点不同,chrome扩展是基于html+js+css开发的,那么就会有二个问题 1. 代码和算法等容易被别人复 ...

  6. caffe中Makefile.config详解

    ## Refer to http://caffe.berkeleyvision.org/installation.html # Contributions simplifying and improv ...

  7. iOS UIFont 字体名字大全

    Font Family: American TypewriterFont: AmericanTypewriterFont: AmericanTypewriter-Bold Font Family: A ...

  8. ansible实践3-playbook条件判断

    --- - hosts: testhost   user: root   gather_facts: True   tasks:     - name: use when       shell: t ...

  9. 织梦autoindex应用 dedecms循环中判断第几条数据

    arclist 标签下使用 [field:global.autoindex/] 默认从1开始 {dede:arclist row='10' titlelen='48' typeid='1' chann ...

  10. 2、flask之基础知识点

    本篇导航: 路由系统 视图函数 请求与响应 模版语法 session 蓝图(blueprint).闪现 (flash) 扩展 一.路由系统 1.可传入参数: @app.route('/user/< ...