- 浏览: 92750 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
yeyu712:
感谢分享,脑塞了很久
document.getElementById("searchForm").submit is not a function -
liuweihug:
jquery瀑布流插件Wookmark完整使用demo - h ...
jQuery实现的瀑布流效果, 向下滚动即时加载内容
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。在Ext中的代码:isBorderBox=isIE&&!isStrict。
当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释:
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:
if (document.compatMode == "BackCompat") { cWidth = document.body.clientWidth; cHeight = document.body.clientHeight; sWidth = document.body.scrollWidth; sHeight = document.body.scrollHeight; sLeft = document.body.scrollLeft; sTop = document.body.scrollTop; } else { //document.compatMode == "CSS1Compat" cWidth = document.documentElement.clientWidth; cHeight = document.documentElement.clientHeight; sWidth = document.documentElement.scrollWidth; sHeight = document.documentElement.scrollHeight; sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft; sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop; }
(以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome)
// JavaScript Document var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session var startX = 3 //set x offset of bar in pixels var startY = 150 //set y offset of bar in pixels var verticalpos="fromtop" //enter "fromtop" or "frombottom" function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body; } function get_cookie(Name) { var search = Name + "="; var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search); if (offset != -1) { offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)); } } return returnvalue; } /*-- function hidebar(){ if (persistclose) document.cookie="remainclosed=1"; document.getElementById("M").style.display="none"; document.getElementById("show_M").style.display="block"; } function showbar(){ if(persistclose==0) document.cookie="remainclosed=0"; document.getElementById("M").style.display="block"; document.getElementById("show_M").style.display="none"; } --*/ function staticbar(){ barheight=document.getElementById("float_qq").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";}; el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y += (pY + startY - ftlObj.y)/8; } else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y += (pY - startY - ftlObj.y)/8; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("float_qq"); stayTopLeft(); } if (window.addEventListener) window.addEventListener("load", staticbar, false); else if (window.attachEvent) window.attachEvent("onload", staticbar); else if (document.getElementById) window.onload=staticbar;
发表评论
-
外部javascript引用非.js文件
2013-10-30 21:18 631按照惯例,外部Javascript文件带有.js扩展名。 但 ... -
js中cookie的使用详细分析
2013-01-08 10:30 191JavaScript中的另一个机制 ... -
一个javascript获取顶级域名的算法
2013-01-08 10:28 271/** * Router - 路由管理 * By W ... -
关于document.compatMode的一些介绍
2012-12-03 22:59 1562对于document.compatMode ,很多朋友可能跟 ... -
用javascript getComputedStyle获取和设置style的原理
2012-10-30 10:35 5471DOM标准引入了覆盖样式表的概念,当我们用document.g ... -
网页 HTML table 导出成 excel
2012-10-25 10:34 611需要在 HTML 的声明里加上 excel 的命名空间 然后 ... -
JSON数据格式基本讲解(转)
2012-10-19 10:07 479在异步应用程序中发送和接收信息时,可以选择以纯文本和 XM ... -
Lazy Load(1.7.0)中文文档 -- 延迟加载图片的jQuery插件
2012-10-19 09:46 988原文的链接在:http://www.appelsiini.ne ... -
jquery实现的年月日三级联动
2012-09-27 14:29 4076<html xmlns="http://www ... -
一个正则表达式,只含有汉字、数字、字母、下划线不能以下划线开头和结尾:
2012-09-26 13:45 29751、一个正则表达式,只含有汉字、数字、字母、下划线不能以下划线 ... -
js去掉字符串前后空格的五种方法
2012-09-25 13:58 1622第一种:循环检查替换 //供使用者调用 funct ... -
Js获取当前页面URL的一些属性
2012-09-07 15:40 209设置或获取对象指定的文件名或路径:window.locatio ... -
js数组 sort方法的分析
2012-09-03 23:45 212原帖地址:http://blog.csdn.net/pre ... -
忽略IE6/7的jquery返回到顶页
2012-08-11 15:13 238<a href="#" id ... -
Lazy Load, 延迟加载图片的 jQuery 插件
2012-08-08 13:32 784Lazy Load 是一个用 JavaScript 编 ... -
jQuery JSONP 跨域实践(php)
2012-08-06 10:04 3634jquery jsonp php实例 远程服务器上的php文 ... -
带参数的JS脚本文件
2012-08-01 17:05 982假如请求:main.js?path=root&tm=1 ... -
如果浏览器禁用javascript应该怎么办?
2012-08-01 15:20 207使用<noscript>提示: <nosc ... -
jQuery实现的瀑布流效果, 向下滚动即时加载内容
2012-08-01 12:38 20463下拉滚动条或鼠标滚 ... -
js压缩工具JSMin的用法
2012-07-30 13:43 323http://www.2cto.com/uploadfile/ ...
相关推荐
档模式在开发中貌似很少用到,最常见的是就是在获取页面宽高的时候,比如文档宽高,可见区域宽高等。
主要介绍了document.compatMode的CSS1compat使用,需要的朋友可以参考下
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大...
= “number”){ if(document.compatMode == “number”){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; }else{ pageWidth = document.body.clie
document.compatMode 获取当前文档的渲染方式。返回值:BackCompat(怪癖模式)和CSS1Compat(标准模式)。 由于IE 8多达五种渲染模式,所以判断是否是怪癖模式需要借助于IE独有的document.documentMo
代码如下: function getTotalHeight(){ if($.browser.msie){ return document.compatMode == “CSS1Compat”? document.documentElement.clientHeight : document.body.clientHeight; } else { return self....
1.先上效果图:2.使用方法: 初始化:Overlayer.Initialize({ZIndex:100,Backgrund:#666,Opacity:80}); 显示:Overlayer.Show();或Overlayer.Initialize({ZIndex:... if(document.compatMode==’BackCompat’) { obj=d
代码在ext里的src\core\ext.js下... }, isStrict = document.compatMode == “CSS1Compat”, isOpera = check(/opera/), isChrome = check(/chrome/), isWebKit = check(/webkit/), isSafari = !isChrome && check(/saf
var isStrict=document.compatMode==”CSS1Compat”, isOpera=ua.indexOf(“opera”)>-1, isSafari=(/webkit|khtml/).test(ua), isIE=ua.indexOf(“msie”)>-1, isIE7=ua.indexOf(“msie 7”)>-1, isGeck
@*点击按钮页面刷新的时候 记住滚动条的位置*@ 代码如下: [removed] [removed] = function () { ... } else if (typeof document.compatMode != ‘undefined’ && document.compatMode != ‘BackCompat’) { scrollPo
if (document.compatMode==’CSS1Compat’) return document.documentElement.clientHeight; if (document.body) return document.body.clientHeight; return window.undefined; } function getVie
compatMode:获取当前document的兼容模式; cookie:获取或者设置当前document的cookie对象; defaultCharset:获取浏览器默认的编码方式; defaultView:获取当前当前document的window对象; dir:获取或者设置...
代码如下://======需引用jquery框架======// //返回当前页面高度 function pageHeight(){ if($.browser.msie){ return document.compatMode == “CSS1Compat”? document.documentElement.clientHeight : document....
_QUIRKS = document.compatMode != 'CSS1Compat', _IERANGE = !window.getSelection, _matches = /(?:msie|firefox|webkit|opera)[\/:\s](\d+)/.exec(_ua), _V = _matches ? _matches[1] : '0', _TIME ...
百度地图毕业设计源码 1. Front-End-interview-questions 分享请标记出处: ...声明文档的解析类型(document.compatMode),避免浏览器的怪异模式。 如果你是使用最新标准编写的页面但未给出 DOCTYPE 声明,这时就可
//define('STYLE_PATH',str_replace($_SERVER['DOCUMENT_ROOT'],'',ROOT_DIR)); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ...
} return { //判断环境,操作系统、浏览器、是否是https连接等 DOC : document, isStrict : DOC.compatMode == “CSS1Compat” , isOpera : check(/opera/) , isChrome : check(/\bchrome\b/) , isWebKit : check(/...