Javascript中浏览器窗口的基本操作总结


Posted in Javascript onAugust 18, 2016

窗口位置

【1】获取

浏览器(firefox不支持)提供了screenLeftscreenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置

在窗口最大化的情况下,运行下列代码时,各个浏览器返回的值并不相同。chrome返回left:0;top:0。而IE则返回left:0;top:56(若有菜单栏,则返回left:0;top:78),这是因为IE中保存的是从屏幕左边和上边到由window对象表示的页面可见区域的距离。safari则由于自身的bug,返回left:-8;top:-8

//移动窗口,会有数值的变化
<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
 myDiv.innerHTML = 'left:' + window.screenLeft + ';top:' + window.screenTop;
})
myDiv.onclick = function(){
 clearInterval(timer);
}
</script>

结果:left:0;top:93

screenXscreenY属性(IE8-)也提供相同的窗口位置信息

[注意]screenLeftscreenTopscreenXscreenY都是只读属性,修改他们的值,并不会使得窗口发生移动

在窗口最大化的情况下,各个浏览器返回的值依然不相同。firefox返回left:-7;top:-7。chrome依然返回left:0;top:0。而IE9+不论是否显示菜单栏始终返回left:-7;top:-7。safari则由于自身的bug,依然返回left:-8;top:-8

<div id='myDiv'></div>
<script>
var timer = setInterval(function(){
 myDiv.innerHTML = 'left:' + window.screenX + ';top:' + window.screenY;
})
myDiv.onclick = function(){
 clearInterval(timer);
}
</script>

结果:left:0;top:93

   兼容

获取窗口位置的兼容写法如下

[注意]由于各浏览器的实现不同,无法在跨浏览器条件下取得精确坐标值

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
 var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
 console.log(leftPos,topPos);

【2】移动

使用moveTo()moveBy()方法可以将窗口精确移动到一个新位置,这两个方法只有IE浏览器支持

moveTo()接收两个参数,分别是新位置的x和y坐标值

<div id="myDiv">点击此处</div>
<script>
//将窗口移动到(0,0)处
myDiv.onclick = function(){
 window.moveTo(0,100); 
} 
</script>

 

moveBy()接收两个参数,分别是水平和垂直方向上移动像素数

<div id="myDiv">点击此处</div>
<script>
//将窗口向下移动100像素
myDiv.onclick = function(){
 window.moveBy(0,100); 
} 
</script>

窗口大小

【1】获取

outerWidthouterHeight属性用于表示浏览器窗口本身的尺寸

[注意]IE8-浏览器不支持

//chrome返回outerWidth:1920;outerHeight:1030
//IE9+和firefox返回outerWidth:1550;outerHeight:838 
//safari返回outerWidth:1552;outerHeight:840
document.body.innerHTML = 'outerWidth:' + window.outerWidth + ';outerHeight:' + window.outerHeight

结果:outerWidth:1440;outerHeight:743

innerWidthinnerHeight属性用于表示页面大小,实际上等于浏览器窗口尺寸大小减去浏览器自身边框及菜单栏、地址栏、状态栏等的宽度

[注意]由于<iframe>本身也有window属性,如果页面中存在框架,那么框架中的innerWidthinnerHeight属性指的是框架本身的innerWidthinnerHeight属性

//chrome返回innerWidth:1920;innerHeight:971
//IE9+返回innerWidth:1536;innerHeight:768 
//firefox返回innerWidth:1536;innerHeight:755
//safari返回innerWidth:1536;innerHeight:764
document.body.innerHTML = 'innerWidth:' + window.innerWidth + ';innerHeight:' + window.innerHeight

结果:innerWidth:701;innerHeight:40

DOM中的document.documentElement.clientWidthdocument.documentElement.clientHeight也可以表示页面大小,与innerWidthinnerHeight返回相同的值

[注意]类似地,如果访问框架,这两个属性也指向框架的属性

//chrome返回innerWidth:1920;innerHeight:971
//IE9+返回innerWidth:1536;innerHeight:768 
//firefox返回innerWidth:1536;innerHeight:755
//safari返回innerWidth:1536;innerHeight:764  
document.body.innerHTML = 'clientWidth:' + document.documentElement.clientWidth + ';clientHeight:' + document.documentElement.clientHeight

结果:clientWidth:701;clientHeight:40

虽然这两类属性在电脑端表示同样的值,在移动端却有不同的用途。innerWidthinnerHeight表示的是视觉视口,即用户正在看到的网站的区域;而document.documentElement.clientWidthclientHeight表示的是布局视口,指CSS布局的尺寸。

【2】调整

使用resizeTo()resizeBy()这两个方法可以用来调整浏览器窗口的大小

[注意]只有IE和safari浏览器支持

resizeTo()接收两个参数:浏览器窗口的新宽度和新高度

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 //将浏览器窗口大小调整到200,200
 window.resizeTo(200,200);
}
</script>

resizeBy()接收两个参数:浏览器新窗口与原窗口的宽度和高度之差

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 //将浏览器窗口宽度减小100
 window.resizeBy(-100,0);
}
</script>

打开窗口

window.open()方法可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。这个方法接收4个参数:要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

参数

【1】通常只需要传递第一个参数,默认在新窗口打开

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 window.open("http://baidu.com");
}
</script>

【2】第二个参数表示已有窗口或者框架的名称,或者是_self、_parent、_top、_blank等窗口打开方式

<div id="myDiv">点击此处</div>
<script>
//在当前窗口打开
myDiv.onclick = function(){
 window.open("http://baidu.com",'_self');
}
</script>

【3】第三个参数是一个逗号分隔的设置字符串,表示在新窗口中都显示哪些特性

Javascript中浏览器窗口的基本操作总结

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 //在新窗口中打开高度为500,宽度为500,纵坐标为0,横坐标为200的qq网页
 window.open("http://qq.com","_blank","height=500,width=500,top=0,left=200")
} 
</script>

【4】第四个参数只在第二个参数命名的是一个存在的窗口时才有用。它是一个布尔值,声明了由第一个参数指定的URL是应用替换掉窗口浏览历史的当前条目(true),还是应该在窗口浏览历史中创建一个新的条目(false),后者是默认的设置

返回值

open()方法的返回值是新窗口的Window对象

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 var w = window.open();
 w.document.body.innerHTML = '测试文字';
}
</script>

新创建的window对象有一个opener属性,其中保存着打开它的原始窗口对象

<div id="myDiv">点击此处</div>
<script>
myDiv.onclick = function(){
 var w = window.open();
 console.log(w.opener === window);//true
}
</script>

过滤

大部分浏览器都有弹出窗口过滤系统。通常,open()方法只有当用户手动单击按钮或者链接的时候才会 调用。javascript代码尝试在浏览器初始载入时开启一个弹出窗口时,通常会失败。如果被拦截,则返回值是undefined

<div id="myDiv">点击此处</div>
<script>
var w = window.open();
console.log(w);//undefined
</script>

窗口关闭

就像方法open()打开一个新窗口一样,方法close()将关闭一个窗口。如果已经创建了 Window对象w,可以使用如下的代码将它关掉

<div>
 <span id="span1">打开窗口</span>
 <span id="span2">关闭窗口</span> 
</div>
<script>
var w;
span1.onclick = function(){
 w = window.open();
}
span2.onclick = function(){
 if(w){
  w.close();
 }
}
</script>

新窗口的对象w还有一个closed属性,用于检测是否被关闭

<div id="myDiv">点击此处</div>
<script>
//先显示false,1s后显示true
myDiv.onclick = function(){
 var w = window.open();
 console.log(w.closed);//false
 setTimeout(function(){
  w.close();
  console.log(w.closed);//true
 },1000);
 
}
</script>

小应用

通过window.open()返回的对象可以操作新打开窗口的开闭

<div id="myDiv">打开窗口</div>
<script>
 var w = null;
 myDiv.onclick = function(){
  //如果w不存在,即没有打开新窗口,或新窗口被关闭
  if(!w){
   w = window.open("http://baidu.com","_blank","height=400,width=400,top=10,left=10");
   myDiv.innerHTML = '关闭窗口';
  //如果w存在,说明新窗口被打开
  }else{
   w.close();
   w = null;
   myDiv.innerHTML = '打开窗口';
  }
 }
</script>

总结

这篇文章主要介绍了JavaScript浏览器窗口的基本操作,理解起来很简单,但是非常实用的功能,希望对大家日常使用JavaScript能有有所帮助。

Javascript 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
基于jquery的$.ajax async使用
Oct 19 Javascript
js传参数受特殊字符影响错误的解决方法
Oct 21 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
node.js中grunt和gulp的区别详解
Jul 17 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
JavaScript实现答题评分功能页面
Jun 24 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 #Javascript
Laydate时间组件在火狐浏览器下有多时间输入框时只能给第一个输入框赋值的解决方法
Aug 18 #Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 #Javascript
AngularJS 工作原理详解
Aug 18 #Javascript
js H5 canvas投篮小游戏
Aug 18 #Javascript
jQuery过滤选择器经典应用
Aug 18 #Javascript
jQuery表单事件实例代码分享
Aug 18 #Javascript
You might like
初识Laravel
2014/10/30 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
javascript网页关键字高亮代码
2008/07/30 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
JavaScript中为元素加上name属性的方法
2011/05/09 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
JavaScript面向对象编程入门教程
2014/04/16 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
JS小游戏之宇宙战机源码详解
2014/09/25 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
2014/10/17 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
Bootstrap基本插件学习笔记之Popover提示框(19)
2016/12/08 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
JavaScript多种滤镜算法实现代码实例
2019/12/10 Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
2020/08/03 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
对Python3中的input函数详解
2018/04/22 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
tensorflow没有output结点,存储成pb文件的例子
2020/01/04 Python
python梯度下降算法的实现
2020/02/24 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
解决Keras自带数据集与预训练model下载太慢问题
2020/06/12 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
法律专业自我鉴定
2013/10/03 职场文书
预备党员的自我评价
2014/03/12 职场文书
个人查摆剖析材料
2014/10/04 职场文书
计生个人工作总结
2015/02/28 职场文书
2015年化验室工作总结
2015/04/23 职场文书
企业承诺书格式范文
2015/04/28 职场文书
MySQL七大JOIN的具体使用
2022/02/28 MySQL