IE11中表单提交至新窗口失效（文件托管在HTTP服务器时）

我之前在项目里也踩过IE11这个兼容性坑，太懂这种头疼的感觉了！咱们先拆解下问题根源，再给你靠谱的解决方案。

问题根源 #

IE11在处理window.open和表单target绑定的时序上有独特的“脾气”：当页面部署在HTTP服务器上时，浏览器的安全策略和窗口上下文初始化延迟，会导致你原代码里先创建窗口再设置表单target的操作，无法被IE11正确关联——它可能还没识别到新窗口的名称，表单就已经尝试提交了，自然就失效了。

靠谱解决方案 #

方案1：调整时序+手动提交（最兼容） #

先阻止表单默认提交，创建窗口后确保它存在，再绑定target并手动触发提交，给IE11足够的时间识别窗口上下文：

// 假设你的提交按钮id是submitBtn
document.getElementById('submitBtn').addEventListener('click', function(e) {
  // 先阻止默认提交行为
  e.preventDefault();
  
  // 计算窗口位置参数（这里保留你原有的计算逻辑）
  var top = 100; // 替换成你的实际计算值
  var left = 100;
  var width = 600;
  var height = 400;
  
  // 创建新窗口
  var win = window.open('about:blank', 'Frame', `top=${top}, left=${left}, width=${width}, height=${height}, location=no, status=1, toolbar=0, menubar=0, resizable=1, scrollbars=1`);
  
  // 检查窗口是否被拦截，同时确保窗口初始化完成
  if (win) {
    // 获取表单（推荐用getElementById，比getElementsByName更可靠）
    var form = document.getElementById('lippForm');
    // 绑定target到新窗口名称
    form.target = 'Frame';
    // 手动提交表单
    form.submit();
  } else {
    // 处理弹窗被拦截的情况
    alert('弹窗被浏览器拦截，请允许当前网站的弹窗后重试');
  }
});

方案2：克隆表单到新窗口（适合同域场景） #

如果你的表单提交地址和当前页面同域，可以直接把表单克隆到新窗口的文档中提交，完全绕开target的兼容性问题：

document.getElementById('submitBtn').addEventListener('click', function(e) {
  e.preventDefault();
  
  var top = 100;
  var left = 100;
  var width = 600;
  var height = 400;
  
  var win = window.open('about:blank', 'Frame', `top=${top}, left=${left}, width=${width}, height=${height}, location=no, status=1, toolbar=0, menubar=0, resizable=1, scrollbars=1`);
  
  if (win) {
    var form = document.getElementById('lippForm');
    // 克隆表单（包括所有表单字段）
    var newForm = form.cloneNode(true);
    // 把克隆的表单添加到新窗口的页面中
    win.document.body.appendChild(newForm);
    // 在新窗口中提交表单
    newForm.submit();
  } else {
    alert('弹窗被浏览器拦截，请允许当前网站的弹窗后重试');
  }
});

额外注意事项 #

• 尽量用getElementById获取表单：相比getElementsByName，ID是唯一标识，避免因为多个表单重名导致的错误。
• 弹窗拦截处理：IE11的弹窗拦截机制比较严格，一定要加拦截提示，否则用户会一脸懵。
• 避免跨域问题：如果表单提交地址和当前页面跨域，方案2可能会有跨域限制，优先用方案1。

内容的提问来源于stack exchange，提问作者S.W