zoukankan      html  css  js  c++  java
  • jsp或者html页面设置IE文档模式的不同

    虽说这篇博客的标题是针对JSP页面的,但是HTML页面也是同样通用的。

    进入本博客的正题。由于公司的业务需求,开发的视频播放页面需要在IE浏览器里面才能打开,不仅仅只是在IE浏览器里面打开,而且是必须在IE9、IE10版本的浏览器里面打开,这限制真心有点儿多啊。

    基于这样的需求,具体有两种实现方式。

    第一种实现方式:

    其本质是,当在除IE之外的浏览器里面点击跳转链接时,在点击该跳转链接的同时唤醒IE进程人,然后,把想要访问的跳转链接放入已经唤醒的IE的浏览器里面,最后,在IE浏览器里面显示想要打开内容。具体的代码及测试用例都可以在GitHub上面查看。

    第二种实现方式:

    该项目可以在IE的高版本浏览器里面访问,但是,可以在一些有特殊需要的页面,比如,像视频监控这样的页面,或者其他的有特殊需要的页面,可以限制在IE的低版本里面访问。

    解决方式:

    在对应的页面里面加入如下代码:

    <meta http-equiv="X-UA-Compatible" content="IE=8,9,10"/>

    或者

    <meta http-equiv="x-ua-compatible" content="IE=9;IE=8" />

    这样看似就可以了,其实,还是不可以。

    当然,如果你的页面是html文件的话,是可以的,也就不用往下看了。

    但是,如果是JSP页面的话,请接着往下看,

    如果你的是JSP页面的话,上面代码是完全不好使的。原因是这样的

    每个JSP页面最上面都会有类似这样的几行代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/jsp/common/tagInclude.jsp"%> <%@ include file="/WEB-INF/jsp/common/declareInclude.jsp"%>

    去掉这些代码就可以了,但是,这些代码是不能去掉的,所以,还得另想办法,于是,调整一下顺序即可完美解决。即是,把我们自己添加的mate标签放在这三个文件前面就可以了。

    其中的原因是这样的,<%@ include file="/WEB-INF/jsp/common/tagInclude.jsp"%>这个文件里面有script标签导致我们自己写的mate标签起作用,哈哈哈,迷雾终于散去。

    最后补上:浏览器如何判断文档类型

    浏览器在准备解析、绘制一个页面的时候,它是如何决定文档模式的呢?实际上浏览器在渲染页面之前会检查两个内容,一个是页面是否有 doctype 信息,另外一个是页面是否有 x-ua-compatible 信息。

    Doctype 检测

    对于一个 HTML 页面,声明位于其中最前面的位置,处于标签之前,这个可以告知浏览器使用哪种 HTML 规范,针对每种规范浏览器同样也会选择对应的文档模式。平时最常见的三种 doctype 信息对应的文档模式如下。

    • 当 doctype 信息如下时,表明该页面是遵守了 HTML5 规范的,浏览器会选择 Standards Mode,这种 doctype 是最推荐的一种,我们平时设计页面都应该加上这一个 doctype。

      <!DOCTYPE html>

    • 当 doctype 如下时,浏览器同样会选择 Standards Mode,虽然和第一种 doctype 有一些区别,但是几乎可以认为是一样的。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    • 当 doctype 如下时,浏览器会选择 Almost Standards Mode,需要注意的是如果今后需要把这个页面改为 HTML5 规范,那么上文讨论的中的分割图片问题可能会错乱。

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    • 当 doctype 缺失的时候,浏览器会选择 Quirks Mode,这是非常不推荐的方式,我们应该尽量避免 Quirks Mode(怪异模式),这对一个 web 应用是非常不利的地方。

  • 相关阅读:
    个人作业2——英语学习APP案例分析
    结对编程1—— 基于界面的四则运算(38/39)
    个人作业1——四则运算题目生成
    软件工程实践项目课程的自我目标
    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
    微信小程序爬坑日记之蜜汁缩进
    微信小程序爬坑日记之背景图片设置
    你不知道的 js 保留字
    微信小程序爬坑日记之下拉刷新
    ES7-Es8 js代码片段
  • 原文地址:https://www.cnblogs.com/myprogramer/p/10659003.html
Copyright © 2011-2022 走看看