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 相关文章推荐
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
jquery通过visible来判断标签是否显示或隐藏
May 08 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
简单实现jQuery多选框功能
Jan 09 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
基于React Native 0.52实现轮播图效果
Aug 25 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
js实现页面图片消除效果
Mar 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
PHP 截取字符串专题集合
2010/08/19 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
PHP生成随机密码方法汇总
2015/08/27 PHP
比较全的JS checkbox全选、取消全选、删除功能代码
2008/12/19 Javascript
Jquery replace 字符替换实现代码
2010/12/02 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
2015/03/24 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
Python3 Random模块代码详解
2017/12/04 Python
详解Python在七牛云平台的应用(一)
2017/12/05 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
Python3常见函数range()用法详解
2019/12/30 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
美国值得信赖的婚恋交友网站:eHarmony
2018/10/04 全球购物
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
集中采购方案
2014/06/10 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2014年禁毒工作总结
2014/11/24 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
2016教师节问候语
2015/11/10 职场文书
体育教师研修感悟
2015/11/18 职场文书
goland 设置project gopath的操作
2021/05/06 Golang
pytorch fine-tune 预训练的模型操作
2021/06/03 Python