关于chrom56版本以后的form标签提交bug

时间:2023-03-09 03:22:28
关于chrom56版本以后的form标签提交bug

最近遇到一个情况:

低版本的浏览器i运行如下代码:

     function query_mission(query_tag) {
// 创建form表单
var ip_list = getIpList()
if (ip_list == false) {
return false
}
form = $("<form></form>")
form.attr('action', '/customer/query/mission_create/')
form.attr('method','post')
form.attr('target','_blank')
object_ip = $("<input type='hidden' name='ip_list' />")
object_tag = $("<input type='hidden' name='query_tag' />")
object_ip.attr('value',JSON.stringify(ip_list))
object_tag.attr('value', query_tag)
form.append(object_ip)
form.append(object_tag)
form.submit()
}

没问题  在高版本浏览器运行报如下错误: Form submission canceled because the form is not jquery-2.1.1.min.js:3 connected

经查询,在chrom56版本以后不支持如上拼凑标签进行提交,需要加如下代码:

 $(document.body).append(form);

问题原因:

在chrom56版本以后,chrom遵循html标准,html标准:如果提交如上form表单不是hmtl文档的标签,会终止提交,所以出现如上错误。在chrom56之前的版本不遵循html标准。详情参考如下:

Form submission algorithm

Chrome issue 2416033002

解决方法就是:

是文档中插入form表单:

 $(document.body).append(form);

或者:

 document.body.appendChild(form);

完整代码:

 function query_mission(query_tag) {
// 创建form表单
var ip_list = getIpList()
if (ip_list == false) {
return false
}
form = $("<form></form>")
form.attr('action', '/customer/query/mission_create/')
form.attr('method','post')
form.attr('target','_blank')
object_ip = $("<input type='hidden' name='ip_list' />")
object_tag = $("<input type='hidden' name='query_tag' />")
object_ip.attr('value',JSON.stringify(ip_list))
object_tag.attr('value', query_tag)
form.append(object_ip)
form.append(object_tag)
$(document).append(form);
form.submit()
}