IE 相容模式 設置 Meta Compatible 和 Iframe 子頁面的關係

背景

因為歷史原因，之前很多的系統都會是 頂級頁面+Iframe來載入子級頁面的這種模式構件系統，而且系統都只能運行在IE6或者IE 高版本相容模式下（IE 7模式）。 隨著現在的審美原來越高，腳本能里越來越強，無論是用戶和是軟體商都希望能系統升級，那麼在升級的過程中，肯定是要保證原有的系統能正常運行的。

通常的做法會是如下：

將頁面利用 html meta標簽，設置Compatible屬性，來使得無論用戶是否設置了相容模式，都讓當前網頁強勢使用最高版本瀏覽器模式，這樣可以讓我們界面利用一些css3的特性做出性能更好，更漂亮的網頁。也能使用更複雜的JS，更頁面增加更強的效果。

那麼可能會遇到以下幾種情況：

1. 頂級頁面設置了Compatible, IE=Edge。 你會發現原來系統iframe能正常的網頁，在你新的頁面中運行不正常了，即便開啟了相容模式，或者iframe裡面的網頁設置了 Compatible, IE=EmulateIE7。你的頁面依然瀏覽不正常。
2. 要解決上面的問題，就是頂級頁面不能設置Compatible, IE=Edge，你可以設置頂級頁面的Compatible, IE=EmulateIE8或IE=EmulateIE7，則可以讓iframe裡面的網頁瀏覽正常。
3. 使用了第2步驟的解決方案，你會發現，當你新做的網頁，裡面用到了css3或者高版本的腳本庫如（vue.js），在測試IE9中很正常，但是將網頁簽入到iframe中後，頁面不正常，或者腳本報錯。這是因為當頂級頁面設置為IE=EmulateIE8或IE=EmulateIE7，iframe裡面的頁面設置IE=edge不起作用，它的文檔模式顯示的是IE8。

為什麼會出現這種情況呢？

原因和解釋

stackoverflow的一個問題《Trying to use IE=edge X-UA-Compatible in an iframe on a page using IE=EmulateIE7》， 有人給出了答案：

IE does not allow mixing IE9+ and older modes in a frame hierarchy. If your top document is IE7, the highest you can get in any inner document is IE8. Similarly, you wouldn't be able to host anything but IE9 mode docs inside an IE9 mode page.

上面的答案很通俗易懂，翻下大意如下：

在IE中不允許IE9+的模式和舊模式混合，如果頂級頁面的文檔模式是IE7，則你在iframe中的頁面最高級的文檔模式是IE8，同樣，頂級頁面的模式是IE9+，則iframe中的頁面文檔模式不可能低於IE9 以下。

這個答案和上面我們遇到的問題是完美契合的，我們也可以寫一些例子來證明這個答案，【例子 】放在附件中，可以下載更改Compatible測試驗證下。

csdn上也有人遇到了，這個問題，有同學回答和上面的一致，直通車《能不能讓iframe內外的頁面用不同的文檔模式解析》。

結論

當遇到背景當中的問題時，目前好像無解，只能設置頂級的網頁最高為IE8，然後所有的系統都必須相容IE8模式，想不支持IE8模式，只能當做外鏈來打開。所有如果要支持前有的系統，無論再過多少年，前端技術如何發展，你新做的系統，技術上也只能限定在IE8支持才情況下。

該如何考量這個問題，還需要從業務、和遷移策略上改變，可以考慮如下幾種方式：

1. 升級頂級的頁面支持最高版本瀏覽器支持，那些需要相容模式才能運行的系統，考慮是否使用外鏈的方式打開。
2. 保留原有的頂級頁面，做一個新的頂級頁面，在頂級頁面打開的那些系統時，提示用戶去舊的平臺打開，並給出鏈接，這種做法會失去一些用戶體驗，怎麼樣儘量讓用戶體驗更好，就要發揮各自的聰明才智了。
3. 直接使用兩個平臺，一個平臺是就有的系統，一個平臺是新的系統。

各位看官，有什麼好的想法可以提提。

參考：

1. Specifying legacy document modes
2. Trying to use IE=edge X-UA-Compatible in an iframe on a page using IE=EmulateIE7
3. 使用X-UA-Compatible來搞定IE瀏覽器相容模式
4. IE強制標準模式---標準模式與相容模式設置