Angular 5项目IE11下IFrame偶发失效问题求助

这种IE11下iframe时好时坏、开F12就稳定的问题我碰到好多次了，结合你的代码来看，大概率是IE11的特性和Angular兼容性的问题，给你逐个分析解决：

1. IE11自动切换到兼容模式 #

IE11对内部站点经常会自动降级到IE8/9的文档模式，这会导致iframe的src绑定、现代JS特性无法正常工作。而开启F12时，你要么手动切回了IE11模式，要么调试工具默认强制用最新模式，所以iframe就正常了。

解决办法： #

在你的Angular应用index.html的<head>最顶部加这个meta标签，强制IE用最新文档模式：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

一定要放在最前面，不然IE可能已经先加载了其他内容，触发兼容模式了。

2. Angular Polyfill没加全 #

Angular 5默认的polyfill配置可能没覆盖IE11需要的所有ES6+特性，比如Promise、数组的新方法这些，没polyfill的话IE11会报错，导致iframe初始化中断。而开F12时，IE会加载调试用的兼容补丁，或者错误被控制台接住不影响后续执行，所以iframe能跑起来。

解决办法： #

打开src/polyfills.ts，把这些polyfill的注释去掉，确保启用：

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es7/array';
import 'zone.js/dist/zone';

如果你的项目用了其他ES6+特性，比如Promise，还要额外加import 'core-js/es6/promise';。

3. iframe的src绑定时机不对 #

IE11的DOM更新比Chrome慢很多，你在ngOnInit里设置trustedUrl时，可能Angular的变化检测还没完成，iframe已经开始加载空的src了，导致失败。而开F12时，调试工具会放慢页面执行速度，给足变化检测的时间，所以iframe能拿到正确的地址。

解决办法： #

要么把初始化逻辑移到ngAfterViewInit（确保DOM已经准备好）：

ngAfterViewInit(): void {
  this.empNo = localStorage.getItem('currentUser');
  this.settingsUrl = 'http://phlsvr500:81/csauthor#/settings/' + this.empNo;
  this.trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.settingsUrl);
}

要么手动触发变化检测，让Angular把更新同步到DOM：

import { ChangeDetectorRef } from '@angular/core';

constructor(private sanitizer: DomSanitizer, private cdr: ChangeDetectorRef) {}

ngOnInit(): void {
  this.empNo = localStorage.getItem('currentUser');
  this.settingsUrl = 'http://phlsvr500:81/csauthor#/settings/' + this.empNo;
  this.trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.settingsUrl);
  this.cdr.detectChanges(); // 手动触发变化检测
}

4. IE11的缓存坑 #

IE11的缓存策略特别激进，有时会缓存iframe的空状态或者错误的加载结果，导致后续加载失败。而开F12时，默认会禁用缓存（看网络面板就能看到），所以每次都会重新加载正确的内容。

解决办法： #

给iframe的src加个随机时间戳参数，避免IE缓存：

this.settingsUrl = 'http://phlsvr500:81/csauthor#/settings/' + this.empNo + '?t=' + new Date().getTime();

或者在IIS里给目标站点配置禁用缓存的响应头：打开IIS管理器，找到http://phlsvr500:81/csauthor对应的站点，添加Cache-Control头为no-cache, no-store, must-revalidate，Expires设为0。

额外要检查的点 #

• 先确认你的iframe目标站点http://phlsvr500:81/csauthor本身在IE11里能正常打开，没有自己的兼容性问题。
• 检查IE11的「兼容性视图设置」，确保你的站点没被加到列表里。

内容的提问来源于stack exchange，提问作者M.Laida