资讯专栏INFORMATION COLUMN

IE 兼容模式 设置 Meta Compatible 和 Iframe 子页面的关系

番茄西红柿 / 3318人阅读

摘要:也能使用更复杂的,更页面增加更强的效果。这是因为当顶级页面设置为或,里面的页面设置不起作用,它的文档模式显示的是。参考参考使用来搞定浏览器兼容模式强制标准模式标准模式与兼容模式设置

背景

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/2015.html

相关文章

  • meta标签http-equiv与content解析

    摘要:幼圆属性幼圆幼圆无论页面是否包含指令,均使用的标准渲染模式。对于多数网站来说,它是首选的兼容性模式幼圆幼圆模式通知以最高级别的可用模式显示内容,这实际上破坏了锁定模式。meta是html语言head区的一个辅助性标签,以下是meta的http-equiv属性和content属性的一些介绍。 http-equiv属性   指示服务器在发送实际的文档之前,要在传送给浏览器的 MIME 文档头部包...

    FWHeart 评论0 收藏0
  • <meta http-equiv="X-UA-Compatible" co

    摘要:对于及以上版本,例如强制浏览器按照特定的版本标准进行渲染。但不支持及以下版本。尽管在真实情况中,你只要选择一种版本这对于测试和维护会更加简单。为了避免制作出的页面在下面出现错误,建议直接将使用进行渲染。本人对该知识点了解不深,本文采用Victor,再进一步!的文章,如果有人看到本页,请直接进入https://www.cnblogs.com/victor5230/p/5846832.html,...

    Seay 评论0 收藏0
  • 360浏览器使用meta标签强制使用指定内核

    摘要:目前,浏览器可以使用进行设置,强制使用指定内核打开页面,方法如下的取值为之一,区分大小写,分别代表用内核,兼容内核,标准内核。 目前国内主流浏览器多为双核浏览器,基于开发成本和效果考虑,兼容模式实在头疼。目前,360浏览器可以使用meta进行设置,强制使用指定内核打开页面,方法如下: //content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表...

    Charles 评论0 收藏0
  • 面试信心来源于过硬基础

    摘要:避免在页面的主体布局中使用,要等其中的内容完全下载之后才会显示出来,显示比布局慢。实现多行文本溢出显示效果实现方法适用范围因使用了的扩展属性,该方法适用于浏览器及移动端 在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等,想着在开年来换一份工作来重新开始自己,那么 你 准备好了吗? 下面是本人整理的一份面试材料,本想自己用的,但是新年第一天 公司突然给了我个...

    Ashin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<