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強制標準模式---標準模式與兼容模式設置