背景

因为历史原因,之前很多的系统都会是 顶级页面+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强制标准模式---标准模式与兼容模式设置

IE 兼容模式 设置 Meta Compatible 和 Iframe 子页面的关系的更多相关文章

  1. $.contents().find设置的data在iframe子页面无法获取值

    <iframe src="iframe16.html" id="iframe16" name="iframe16"></i ...

  2. 获取iframe子页面内容高度给iframe动态设置高度

    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...

  3. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式

    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...

  4. Js获取iframe子页面全局变量

    项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...

  5. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  6. iframe子页面position的fixed

    前言: 首先说一说我昨天天的苦逼经历.中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了. 经过反复询问,得知他用了两层iframe,再加上最外的父页面 ...

  7. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  8. vue 给嵌套的iframe子页面传数据 postMessage

    Vue组件下嵌套了一个不同域下的子页面,iframe子页面不能直接获取到父页面的数据,即使数据存在localStorage中,子页面一样是获取不到的,所以只好使用postMessage传数据: < ...

  9. JS中iframe子页面与父页面之间通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

随机推荐

  1. Jquery ValidationEngine 修改验证提示框的位置

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 5W1H

    WHY   ——为什么做?原因与目标 WHAT ——做什么?目标与内容 WHO   ——谁去做?具体的执行者 WHEN ——什么时间做?执行时间 WHERE——在什么地方做?执行地点 HOW——怎样做 ...

  3. mysql 死锁解决办法

    查询表的时候,发现一圈圈转啊转,就是不出来数据,猜测表被锁住 解决办法 : mysql> show processlist ; mysql> kill 4;       说明 : 4为 i ...

  4. Robot Framework搭建

    需要安装的内容如下: 1. Python2.7.13(听说python3对RF支持的不是很好,所以我下的Python2) 2. wxPython 2.8.12.1(只能这个版本) 3. robotfr ...

  5. RTT之内存管理及异常中断

    内存管理分静态内存管理和动态内存管理(根据大小又分2种) 静态内存管理:创建.删除.初始化.解绑.申请和释放.初始化内存池是属于静态内存管理,与创建内存池不同的是,此处内存池对象所使用的内存空间是由用 ...

  6. 转:POST 400 Bad Request The request sent by the client was syntactically incorrect

    最近在做Web开发的时候,使用$.post提交数据,但是回调函数却没有被触发,按F12看控制台输出是:POST *** 400 Bad Request 后台是SpringMVC的,设置了断点也不会被触 ...

  7. 分布式任务框架elastic-job 学习笔记

    官方资料:https://github.com/dangdangdotcom/elastic-job ------------------------------------------------- ...

  8. [PHP]AES加密----PHP服务端和Android客户端

    本文采取128位AES-CBC模式加密和解密 1.首先对服务端安装mcrypt: sudo apt-get install php5-mcrypt php5-dev sudo php5enmod mc ...

  9. 查看服务器配置信息prtdiag与systeminfo实用命令

    UNIX(SUN服务器)bash-2.05# prtdiag -v系统配置:  Sun Microsystems  sun4u Sun Fire V890系统时钟频率:150 MHz内存大小:3276 ...

  10. JEECMS站群管理系统-- 标签的配置流程

    以cms_content_list为例,首先,每一个标签的声明都是在jeecms-context.xml中进行的, <?xml version="1.0" encoding= ...