iframe标签实现form表单提交下载文件

一、表单提交的代码常规写法

<iframe name="testIframeName" style="display:none;"></iframe>  
<form target="testIframeName" method="post" action="xxxx.do">  
    <input type="text" name="username"/>  
    <input type="password" name="password"/>  
    <input type="submit" value=" 提 交 " />  
</form>  

二、替换成全部隐藏的代码写法

• form表格的target属性的值对应上iframe的name属性值

$("#downLoadIFrame").remove();
var $Iframe = $("<iframe>");
$Iframe.attr("name", "downLoadIFrame");
$Iframe.attr("id", "downLoadIFrame");
$Iframe.attr("style", "diaplay:none");
$("body").append($Iframe);
var $form = $("<form>");
$form.empty();
$form.attr("style", "diaplay:none");
$form.attr("target", "downLoadIFrame"); // 对应iframe的name属性值
$form.attr("method", "post");
$form.attr("action", "xxxxx.do"); // 指向后端请求链接
$("body").append($form);

// 新建input, 并设置name属性和value的值
var $input = $("<input>");
$input.attr("type", "hidden");
$input.attr("name", "xyz"); // 填上后台对应的name字段
$input.attr("value", "xxxxxyyyyzzzz"); // 填上传的值
$form.append($input);

$form.submit();

// 监听iframe回调
$Iframe.on("load", function() {
    var contentWin = document.getElementById("downLoadIFrame").contentWindow;
    var backBodyText = contentWin.document.body.innerText;

    $Iframe.remove();
});
$Iframe.remove();