博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js高级编程-Bom
阅读量:4116 次
发布时间:2019-05-25

本文共 1322 字,大约阅读时间需要 4 分钟。

8.1.3窗口位置

 

IE、Safari、Opera和Chrome都提供了screenLeft 和screenTop属性,分别用于表示相对于屏幕左边和上边的位置。

 

Firefox则在screenX和screenY属性中提供相同的窗口位置信息。Safari和Chrome也同事支持这两个属性

 

使用下面的代码可以跨浏览器取得窗口左边和上边的位置

 

var leftPos = (typeof window.screenLeft =="number")? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop =="number")? window.screenTop : window.screenY;

这个例子运用二院操作符首先确定screenLeft和screenTop的属性是否存在,如果不存在,就取得screenX和screenY的值。

 

8.1.4 窗口大小

在IE,以及Safari,Opera和Chrome中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了窗口大小的信息。在IE6中,这些属性必须在

标准模式下才有效;如果是混杂模式,就必须通过document.body.clientWidth和document.body。clientHeight取得相同信息。而对于混杂模式下的Chrome,则无论通过document.domentElement还是document.body中的clientWidth和clientHeight属性,都可以取得视口的大小。

虽然最终无法确定浏览器窗口本身的大小,但是却可以取得页面视口的大小,如下所示:

var pageWidth = window.innerWidth,

pageHeight = window.innerHeight;

 

if(typeof pageWidth != "number"){

     if(document.compatMode == "CSS1Compat"){

             pageWidth = document.documentElement.clientWidth;

             pageHeight = document.documentElement.clientHeight;

      }else{

             pageWidth = document.body.clientWidth;

             pageHeight = document.body.clientHeight;

     }

}

 

另外,使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小,都接收两个参数,其中resizeTo()接收浏览器窗口的新宽度和新高度,

resizeBy()接收新窗口和原窗口的宽度和高度之差。来看下面的例子:

//调整到100*100

window.resizeTo(100,100);

 

//调整到200*150

window.resizeBy(100,50);

 

注意这两个方法有可能被高版本的浏览器禁用

 

 

 

 

转载地址:http://esupi.baihongyu.com/

你可能感兴趣的文章
高德地图js API实现鼠标悬浮于点标记时弹出信息窗体显示详情,点击点标记放大地图操作
查看>>
初始化VUE项目报错
查看>>
vue项目使用安装sass
查看>>
HTTP和HttpServletRequest 要点
查看>>
在osg场景中使用GLSL语言——一个例子
查看>>
关于无线PCB中 中50欧姆的特性阻抗的注意事项
查看>>
Spring的单例模式源码小窥
查看>>
后台服务的变慢排查思路(轻量级应用服务器中测试)
查看>>
MySQL中InnoDB事务的默认隔离级别测试
查看>>
微服务的注册与发现
查看>>
bash: service: command not found
查看>>
linux Crontab 使用 --定时任务
查看>>
shell编程----目录操作(文件夹)
查看>>
机器学习-----K近邻算法
查看>>
HBASE安装和简单测试
查看>>
关于程序员的59条搞笑但却真实无比的编程语录
查看>>
搞笑--一篇有趣的文章编译自一篇西班牙博客。有一位美丽的公主,被关押在一个城堡中最高的塔上,一条凶恶的巨龙看守着她,需要有一位勇士营救她…
查看>>
非常不错 Hadoop 的HDFS (Hadoop集群(第8期)_HDFS初探之旅)
查看>>
Tomcat启动错误,端口占用
查看>>
laravel 修改api返回默认的异常处理
查看>>