关于chrom56版本以后的form标签提交bug
最近遇到一个情况:
低版本的浏览器i运行如下代码:
1 function query_mission(query_tag) { 2 // 创建form表单 3 var ip_list = getIpList() 4 if (ip_list == false) { 5 return false 6 } 7 form = $("<form></form>") 8 form.attr('action', '/customer/query/mission_create/') 9 form.attr('method','post') 10 form.attr('target','_blank') 11 object_ip = $("<input type='hidden' name='ip_list' />") 12 object_tag = $("<input type='hidden' name='query_tag' />") 13 object_ip.attr('value',JSON.stringify(ip_list)) 14 object_tag.attr('value', query_tag) 15 form.append(object_ip) 16 form.append(object_tag) 17 18 form.submit() 19 }
没问题 在高版本浏览器运行报如下错误: Form submission canceled because the form is not jquery-2.1.1.min.js:3 connected
经查询,在chrom56版本以后不支持如上拼凑标签进行提交,需要加如下代码:
1 $(document.body).append(form);
问题原因:
在chrom56版本以后,chrom遵循html标准,html标准:如果提交如上form表单不是hmtl文档的标签,会终止提交,所以出现如上错误。在chrom56之前的版本不遵循html标准。详情参考如下:
解决方法就是:
是文档中插入form表单:
1 $(document.body).append(form);
或者:
1 document.body.appendChild(form);
完整代码:
1 function query_mission(query_tag) { 2 // 创建form表单 3 var ip_list = getIpList() 4 if (ip_list == false) { 5 return false 6 } 7 form = $("<form></form>") 8 form.attr('action', '/customer/query/mission_create/') 9 form.attr('method','post') 10 form.attr('target','_blank') 11 object_ip = $("<input type='hidden' name='ip_list' />") 12 object_tag = $("<input type='hidden' name='query_tag' />") 13 object_ip.attr('value',JSON.stringify(ip_list)) 14 object_tag.attr('value', query_tag) 15 form.append(object_ip) 16 form.append(object_tag) 17 $(document).append(form); 18 form.submit() 19 }
学习是一种态度,坚持是质变的利器!