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
            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;
        }

        // for small pages with total height less then height of the viewport
        var pageWidth,pageHeight;
        if(yScroll < windowHeight){
            pageHeight = windowHeight;
        }else{
            pageHeight = yScroll;
        }

        if(xScroll < windowWidth){
            pageWidth = windowWidth;
        }else{
            pageWidth = xScroll;
        }
        return {
            "pageWidth":pageWidth,
            "pageHeight":pageHeight
        }
    }
//alert(getPageSize().pageHeight)

javascript 获取当前页面可视高度和宽度的函数

时间: 2024-10-10 17:24:39

javascript 获取当前页面可视高度和宽度的函数的相关文章

纯Javascript获取一个元素的高度和宽度

纯Javascript脚本获取元素样式 一,问题描述 有时候,我们需要做一些页面让其中的元素按照不同的显示器而自适应,那么怎么计算这个元素的margin-top呢,我相信大家都会计算,那么涉及到其中的一个就是使用JS去获得这个元素的样式,比如说高度 二,解决方案 我们都知道,对于一个HTML页面元素来说,它的样式定义有两种方式,一种是写在元素的同行节点,俗称行内样式,另外一种则是定义在外部的CSS文件中,俗称外部样式,也就是这两种定义方式,导致我们获取高度的方式有所差异,详见以下表格 var o

iframe父页面获取子页面的高度

最近做项目中用到了iframe,子页面更改父页面的高度,经过九九八十一难,找到了解决的办法. $(window).load(function() {  var h=$(document).height();  var ifHeight = $(window.top.document).find(".XX").css({  height:h }); }); window.top:是获取子页面所有body以上的元素. window.parent()是获取子页面body的上一级父元素.

Query 获取浏览器窗口的高度和宽度

我们使用JQuery开发的过程中我们有时会根据浏览器窗口的位置定位,下面就讲解一下获取浏览器窗口尺寸的一些方法. 浏览器可视区域尺寸,注意这里指的不是浏览器窗口尺寸,也不是页面尺寸,我们可以想象成是我们能看到的文档面积大小 当前浏览器窗口中可视区域高度:$(window).height() 当前浏览器窗口中可视区域宽度:$(window).width() 浏览器整个文档的尺寸 当前文档的高度:$(document).height() 当前文档的宽度:$(document).width() 浏览器

JQuery获取浏览器窗口的高度和宽度

<script type="text/javascript"> $(document).ready(function() { alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());//浏览器时下窗口文档body的高度 alert($(document.body).outerHeight(tr

20160215--获取页面的高度和宽度

以下为 JS 代码: "屏幕分辨率为:"+screen.width+"*"+screen.height "屏幕可用大小:"+screen.availWidth+"*"+screen.availHeight "网页可见区域宽:"+document.body.clientWidth "网页可见区域高:"+document.body.clientHeight "网页可见区域宽(包括边

javascript获取对应页面的代码

window.onload = function () { function getUrls(url) {//核心代码是url2这行代码,通过.replace()方法将对应的字符串替换成其他方式 var url2 = url.replace("/home", "").replace("/index", ""); var host = window.location.href; if (url2 == host) { $('ul

原生JavaScript获取当前页面路径

var currentPageUrl = ""; if (typeof this.href === "undefined") { currentPageUrl = document.location.toString().toLowerCase(); } else { currentPageUrl = this.href.toString().toLowerCase(); }

获取页面高度及宽度

js获取: 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth(包括边线的宽) 网页可见区域高:document.body.offsetHeight(包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body

HTML 获取屏幕、浏览器、页面的高度宽度

本篇主要介绍Web环境中屏幕.浏览器及页面的高度.宽度信息. 目录 1. 介绍:介绍页面的容器(屏幕.浏览器及页面).物理尺寸与分辨率.展示等内容. 2. 屏幕信息:介绍屏幕尺寸信息:如:屏幕.软件可用以及任务栏的高度和宽度. 3. 浏览器信息:介绍浏览器尺寸信息:如:浏览器.内部页面以及工具栏的高度和宽度. 4. 页面信息:介绍HTML页面尺寸信息:如:body总的.展示的高度和宽度. 一.介绍 1. 容器 一个页面的展示,从外到内的容器为:屏幕.浏览器以及页面本身. HTML元素展现在页面内