iframe跨域传值超过2M的问题解决

最新推荐文章于 2023-05-26 16:22:26 发布

housen1987

最新推荐文章于 2023-05-26 16:22:26 发布

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： iframe post 跨域传值 2M

本文链接：https://blog.youkuaiyun.com/housen1987/article/details/84299249

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用iframe结合JS创建form表单进行POST请求的方法，以解决iframe传值超过2K限制的问题。通过配置Tomcat以允许更大的POST数据长度和调整跨域策略，实现数据的有效传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用iframe进行传值时，如果采用URL的方式传递，则最大只能传递大约2k的数据，超过这个长度就会被截断了，那么是否可以采用post的方式传值呢？答案是可以的，我们可以采用js创建一个form表单，并将此form提交到iframe上，这样就能做到打破2k数据的限制。

<iframe id="frame1" name="frame1" src="" style="display:none"></iframe>
<script>
var tranVal = function(){
	document.getElementById("frame1").style.display = "block";
	var postForm = document.createElement("form");
	postForm.method = "post";
	postForm.action = "http://localhost:8080/test/getdata.jsp";
	postForm.target = "frame1";//用来将数据提交到frame1上
	
	var input = document.createElement("input");
	input.type = "hidden";
	input.name = "username";//这个是传值的名称，要记住
	var strA = "1234567890";
	//循环500000次后，保证字符串的大小大于2M
	for(var i=0;i<500000;i++) strA+= "1234567890";
	input.value = strA;
	postForm.appendChild(input);
	document.body.appendChild(postForm);
	postForm.submit();
	//用完之后，不要忘记删掉
	postForm.removeChild(input);
	document.body.removeChild(postForm);
}
</script>
<button onclick="tranVal()">
	传递值
</button>

还需要注意2个问题：

1 tomcat下post不能超过2M的问题

这个需要将tomcat的配置文件server.xml修改一下：

<Connector connectionTimeout="20000" port="8080" protocol="HTTP/1.1" redirectPort="8443" maxPostSize="0"/>

maxPostSize为0时，表示不用限制长度。

2 跨域的问题

跨域不影响iframe的post传值，发送方的tomcat无需更改，只是需要将接收方的tomcat的maxPostSize修改为0即可。