IE9中表单提交时iframe加载失败问题求助（附代码）

针对IE9这种不支持FormData的老旧浏览器，用form+iframe确实是最可靠的文件上传方案。我来帮你补全代码细节，尤其是你提到的iframe onload事件处理部分，确保整个上传流程稳定运行。

一、优化后的HTML结构 #

先调整一下你的HTML代码，补充一些细节避免潜在问题：

<!-- 隐藏的回调iframe，初始设为空白页避免无用请求 -->
<iframe 
  name="ie9Iframe" 
  ref="iframe" 
  src="about:blank"
  width="0" 
  height="0" 
  style="display: none; border: none;"
></iframe>

<!-- 上传表单，target绑定到iframe -->
<form 
  ref="uploadForm" 
  target="ie9Iframe" 
  action="/pages/upload" 
  method="post" 
  enctype="multipart/form-data"
>
  <input 
    class="fileChoose" 
    type="file" 
    name="upload_file" 
    @change="fileChanged" 
    id="file"
  />
  <input type="submit" value="提交" id="fileSubmit"/>
</form>

这里把iframe的src设为about:blank，并加上display: none和border: none，彻底隐藏且不影响页面布局。

二、iframe onload 事件完整实现 #

根据你提到的JS代码，我分原生JS和Vue两种场景给出实现（看你用了@change，大概率是Vue项目）：

场景1：原生JavaScript #

// 获取iframe元素
const uploadIframe = window.frames['ie9Iframe'];

// 绑定onload事件，监听上传完成后的响应
uploadIframe.onload = function() {
  try {
    // 读取iframe内的响应内容（IE9兼容写法）
    const responseContent = this.contentDocument?.body?.textContent || this.contentWindow.document.body.textContent;
    
    // 解析后端返回的结果（注意：后端要返回文本格式的JSON，不能直接返回application/json）
    let uploadResult;
    try {
      uploadResult = JSON.parse(responseContent);
    } catch (parseErr) {
      uploadResult = { success: false, message: '响应格式错误，请检查后端返回' };
    }

    // 根据结果处理后续逻辑
    if (uploadResult.success) {
      alert('文件上传成功！');
      // 重置表单，允许再次选择同一文件
      document.getElementById('uploadForm').reset();
    } else {
      alert(`上传失败：${uploadResult.message}`);
    }
  } catch (err) {
    // 处理跨域或其他异常情况
    alert(`上传过程出现异常：${err.message}`);
  }
};

场景2：Vue 组件中实现 #

export default {
  mounted() {
    const iframe = this.$refs.iframe;
    const vm = this; // 保存Vue实例引用，避免回调中this指向问题

    iframe.onload = function() {
      try {
        const responseContent = this.contentDocument?.body?.textContent || this.contentWindow.document.body.textContent;
        let uploadResult;
        
        try {
          uploadResult = JSON.parse(responseContent);
        } catch (parseErr) {
          uploadResult = { success: false, message: '响应格式不正确' };
        }

        if (uploadResult.success) {
          vm.$message.success('文件上传成功！');
          // 重置表单
          vm.$refs.uploadForm.reset();
        } else {
          vm.$message.error(`上传失败：${uploadResult.message}`);
        }
      } catch (err) {
        vm.$message.error(`上传异常：${err.message}`);
      }
    };
  },
  methods: {
    fileChanged(e) {
      // 可选：文件选择后的前置校验
      const selectedFile = e.target.files[0];
      if (!selectedFile) return;

      // 示例：限制文件大小不超过10MB
      if (selectedFile.size > 10 * 1024 * 1024) {
        alert('文件大小不能超过10MB');
        e.target.value = ''; // 清空已选文件
        return;
      }

      // 也可以在这里自动触发提交，不用手动点击提交按钮
      // this.$refs.uploadForm.submit();
    }
  }
};

三、必须注意的核心细节 #

• 后端返回格式：IE9下iframe无法正确接收application/json类型的响应，会触发下载弹窗。后端需要将响应类型设为text/html或text/plain，把JSON字符串放在响应体中返回。
• 表单重置：上传完成后一定要重置表单，否则用户再次选择同一文件时，change事件不会被触发（因为文件路径没有变化）。
• 跨域问题：如果上传接口和当前页面不同域，IE9下可能会出现权限异常，这种情况下需要后端配合设置跨域相关的响应头，或者采用同域代理。
• 初始iframe src：设为about:blank可以避免页面加载时的无效请求，同时防止某些情况下的浏览器警告。

内容的提问来源于stack exchange，提问作者Xiaoxun Yue