解决iframe参数过长无法加载问题小记

大家好，又见面了，我是你们的朋友全栈君。

项目中用到了iframe，传参的时候使用的src属性，默认采用的get方式，此种方式在参数较长的时候就会报错（404无法找到资源），为了解决这种情况，改为采用post方式提交。解决方法：结合form表单，利用表单的post请求方式达到目的。

实现方式 
增加一个form表单的标签，method设置为post，target设置一个标识，假如target=”target1” 
在iframe设置name属性，name需要与target一致 name = “target1”

发送请求时通过发送form submit请求来使用post方式
以下代码用于定义iframe和相关form表单。

<form id="form1" action="" target="target1" method="post">
        <input name="Year" type="hidden" value="" />
        <input name="CommentUnitCode" type="hidden" value="" />
        <input name="CommentUnitType" type="hidden" value="" />
        <input name="dataType" type="hidden" value="" />
</form>
<iframe id="iframe1" name="target1"  src="" frameborder="0"></iframe>

以下代码用于定义form表单的提交对应的action方法和参数，这样就以post方式将参数传至后台，不必再担心参数过长的问题。 

var frame1 = document.getElementById('iframe1');
var url1 = "/DataDisplay/ShowRangeDataPage";
$('#form1 input[name=Year]').val(year);
$('#form1 input[name=CommentUnitCode]').val(CommentUnitCode);
$('#form1 input[name=CommentUnitType]').val(CommentUnitType);
$('#form1 input[name=dataType]').val(dataparams.dataType);
$('#form1').attr('action', url1);
$('#form1').submit();

表单提交后，在后台获取并保存参数值。

[HttpPost]
public ActionResult ShowRangeDataPage(ReportDataListRequest request)
{
	ViewBag.Year = request.Year;
	ViewBag.CommentElementValue = request.CommentElementValue;
	ViewBag.CommentUnitValue = request.CommentUnitValue;
	ViewBag.CommentUnitCode = request.CommentUnitCode;
	ViewBag.CommentUnitType = request.CommentUnitType;
	ViewBag.dataType = request.dataType;
	return View();
}     

前端ShowRangeDataPage页面调用post传的参数。

$.ajax({
		url: postUrl,
		type: 'post',
		dataType: 'json',
		data: {
			Year: Year,
			CommentUnitCode: '@ViewBag.CommentUnitCode',
			CommentUnitType: '@ViewBag.CommentUnitType',
			dataType: '@ViewBag.dataType'
		},
		success: function (result) {
			var data = eval(result.PieDataList);  
			data.sort(function (a, b) {
				return b.value - a.value;
			});
			clickProvice(data);
		},
		error:function (message) {
			console.log(message);
		}
});