前端开发跨浏览器计算页面大小、滚动高度

前端开发中跨平台。跨USER-AGENT的适配很繁琐

想要得到浏览器px大小非常烦。因此以下2个函数非常实用

这两个javascript函数很有用,用来计算浏览器页面大小,窗体大小,以及滚动高度,源码例如以下:

function getPageSize() {
    var xScroll, yScroll;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
        xScroll = document.body.scrollWidth;
        yScroll = document.body.scrollHeight;
    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
        xScroll = document.body.offsetWidth;
        yScroll = document.body.offsetHeight;
    }
    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer
        if (document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
        windowWidth = document.documentElement.clientWidth;
        windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
        windowWidth = document.body.clientWidth;
        windowHeight = document.body.clientHeight;
    }

    var pageHeight, pageWidth;
    // for small pages with total height less then height of the viewport
    pageHeight = yScroll < windowHeight ? windowHeight: yScroll;
    // for small pages with total width less then width of the viewport
    pageWidth = xScroll < windowWidth ? windowWidth: xScroll;
    return {
        pageWidth: pageWidth,
        pageHeight: pageHeight,
        windowWidth: windowWidth,
        windowHeight: windowHeight
    };
}
function getPageScroll() {
    var xScroll, yScroll;
    if (self.pageYOffset) {
        yScroll = self.pageYOffset;
        xScroll = self.pageXOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict
        yScroll = document.documentElement.scrollTop;
        xScroll = document.documentElement.scrollLeft;
    } else if (document.body) { // all other Explorers
        yScroll = document.body.scrollTop;
        xScroll = document.body.scrollLeft;
    }
    return {
        xScroll: xScroll,
        yScroll: yScroll
    };
}

參考     http://my.oschina.net/jockchou/blog/465220

时间: 2024-11-09 19:06:35

前端开发跨浏览器计算页面大小、滚动高度的相关文章

响应式设计时如何自动阻止移动浏览器自动调整页面大小

众所周知,设计响应式页面的时候,经常会碰到某些浏览器他会缩小整个页面的大小来防止出现页面被截取的情况, 我们需要通过放大才能看到其中的内容.这是移动浏览器自动调整页面的功能. 这样就完全达不到响应式的要求. 那么问题来了,如何阻止浏览器自动调整页面大小呢. 有时候看别人写好的响应式代码的时候,系不系经常会看到head标签中经常会出现如下代码 <meta name="viewport" content="initial-scale=2.0,width=device-wid

web前端开发的浏览器兼容性

首先我们来看一下目前市面上常见的一些浏览器:ie.chrome.firefox.safari.opera.maxthon.360.qq.yy.uc.sogou.2345.淘宝.猎豹.世界之窗等 其中表现很出色的有chrome.firefox.safari等:而表现极差的就是ie6/7内核浏览器了,我们的兼容性工作大半都是围绕这两个浏览器内核展开 我们的常规处理方式是调试各浏览器网页显示效果.使用成熟的前端开发框架.运用css与hack技巧等 常见hack技巧 css _:ie6内核浏览器识别 c

转:【web前端开发】浏览器兼容性处理大全

解决思路: ①.写代码的时候遵循W3C标准,按照最新稳定版本的IE或WebKit内核浏览器进行编码 ②.遇到部分无法全面解决浏览器兼容的时候,采取CSS的hack手段进行针对性微调.简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器. ③.遇到特别难解决的,可以用JS强制修改. 1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果div

【web前端开发】浏览器兼容性处理大全

1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果div里的实际内容大于所设高度,在FF中会出现两个div重叠的现象:但在IE中,下面的div会自动给上面的div让出空间所以为避免出现层的重叠,高度一定要控制恰当,或者干脆不写高度,让他自动调节,比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候,则需要在div块的

[JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据  都可以 别忘了引用jquery类库 [JavaScript] 纯文本查看 复制代码

第141天:前端开发中浏览器兼容性问题总结(二)

1. 默认的内外边距不同 问题: 各个浏览器默认的内外边距不同 解决: *{margin:0;padding:0;} 2.水平居中的问题 问题: 设置 text-align: center   ie6-7文本居中,嵌套的块元素也会居中 ff /opera /safari /ie8文本会居中,嵌套块不会居中 解决: 块元素设置 1.margin-left:auto;margin-right:auto 2.margin:0 auto; 3.<div align="center">

前端开发篇——浏览器默认样式及css初始化

为什么要初始化css? 建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化. 相信很多人都曾经出现过多多少少的,有时候进行网页布局的时候,不知道为什么设置的网页边距总是达不到自己想要的效果. 比如,我在这个属性设置了60px,但是,它却变成了92px. 查看了一下所有属性,原来是浏览器默认加上去的. 再看看,为什么我,

前端开发入门到实战:计算一个页面内每个模块的曝光时间(停留时间)

产品希望看到投放出去的活动页,用户对其页面内的什么信息比较感兴趣,对什么信息完全不感兴趣.=> 计算页面内每模块的停留时间 第一次听到这个需求,我的大脑开始疯狂运转,然后想到了plan 1, plan 2, plan3...中间还有很多失败想法我已经忘记了,这里方案三是我最终采用的方法. 方案一:根据页面dom将页面分模块 var bodyChildrenLists = $('body').children() var bodyChildDomLsit = [] var initHeight =

前端开发中一些好用的chrome插件汇总

下载了很多chrome插件和应用,有些是常用的,有些偶尔用一次,有些是不止开发中用的,现做一下总结: 红色是个人认为比较好用的,排名不分先后 1.AppJump管理应用的插件 安装了许多应用之后肯定是需要工具管理的. AppJump能从工具栏下拉菜单上快速找到并启动应用程序和其他插件.AppJump的一个很酷的功能是能将应用程序和插件组织进入不同组.例如,可以轻松将个人插件同工作插件隔开,以进行更有效的时间管理. 但是管理全部插件会另开页面,这点不太方便. 2.Extensions Manage