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

窗口位置

【1】获取

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

　　在窗口最大化的情况下，运行下列代码时，各个浏览器返回的值并不相同。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

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

　　[注意]screenLeft、screenTop、screenX和screenY都是只读属性，修改他们的值，并不会使得窗口发生移动

　　在窗口最大化的情况下，各个浏览器返回的值依然不相同。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】获取

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

　　[注意]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

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

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

//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.clientWidth和document.documentElement.clientHeight也可以表示页面大小，与innerWidth和innerHeight返回相同的值

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

//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

　　虽然这两类属性在电脑端表示同样的值，在移动端却有不同的用途。innerWidth和innerHeight表示的是视觉视口，即用户正在看到的网站的区域；而document.documentElement.clientWidth和clientHeight表示的是布局视口，指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】第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性

<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
， 窗口大小
， 弹出窗口
关闭窗口
uc浏览器javascript、浏览器启用javascript、谷歌浏览器javascript、浏览器禁用javascript、浏览器javascript，以便于您获取更多的相关知识。

时间： 2024-08-30 23:18:27

Javascript中浏览器窗口的基本操作总结_javascript技巧的相关文章

JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决_javascript技巧

var date = new Date('2016-11-11 11:11:11'); document.write(date); 最近在写一个时间判断脚本,需要将固定好的字符串时间转换为时间戳进行比较,在做的时候个人习惯使用chrome作为调试工具,代码基本完成之后,一切正常: 使用其他浏览器访问,好嘛,IE跟safari都不兼容,返回错误"Invalid Date". 想着估计是字符串格式的问题,改成'2016/11/11 11:11:11'再测试,结果正常,以为这样应该没问题了,

JavaScript中setter和getter方法介绍_javascript技巧

javascript中的setter.getter是平时接触比较少的方法,其本身也并不是标准方法,只在非ie浏览器里支持(ie内核也许有其他方法可以做到呢?暂时不知其解),但是加以利用可以做许多事情,比如: 1.对数据的访问限制: a.value是对value变量的getter方法调用,如果在getter方法实现中抛出异常,可以阻止对value变量的访问 2.对dom变量进行监听: window.name是一个跨域非常好用的dom属性(大名鼎鼎,详见百度),如果覆盖window.name的set

javascript中的正则表达式使用详解_javascript技巧

[1]定义:正则又叫规则或模式,是一个强大的字符串匹配工具,在javascript中是一个对象 [2]特性: [2.1]贪婪性,匹配最长的 [2.2]懒惰性,不设置/g,则只匹配第1个 [3]两种写法: [3.1]perl写法(使用字面量形式): var expression = /pattern/flags; e.g. var pattern = /a/i;//匹配字符串中所有'a'的实例 [3.1.1]三个标志flags [a]g:表示全局模式(global) [b]i:表示不区分大小写(i

JavaScript中的函数模式详解_javascript技巧

JavaScript设计模式的作用是提高代码的重用性,可读性,使代码更容易的维护和扩展 在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函数:此外,函数还可以提供作用域. 创建函数的语法 命名函数表达式 复制代码 代码如下: //命名函数表达式 var add = function add(a,b){     return a+b; }; 函数表达式 复制代码 代码如下: //又名匿名函数 var add = function(a,b){     return a+b;

模拟javascript中的sort排序(简单实例)_javascript技巧

一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr.sort([compareFunction]) 参数 compareFunction 可选.用来指定按某种顺序进行排列的函数.如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序. 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前: 如

Javascript中的对象和原型(二)_javascript技巧

在上篇文章中JavaScript中的对象和原型(一)提到了JavaScript中对象的创建的一些基本操作,接下来讨论下继续讨论. 一 工厂模式 我们知道,要创建一个对象我们可以用如下代码: var user = new Object(); //使用new运算符创建一个对象 user.name = '念在三角湖畔'; //给对象添加属性 user.age = 22; user.address = '湖北武汉'; alert(user.name + " " +user.age);//返回

关于JavaScript中事件绑定的方法总结_javascript技巧

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看. JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 一.在DOM元素中直接绑定 也就是直接在html标签中通过 onXXX="" 来绑定.举个例子: <input type="button" value="点我呦" onclick="aler

javascript中cookie对象用法实例分析_javascript技巧

本文实例讲述了javascript中cookie对象用法.分享给大家供大家参考.具体如下: 属性 name          唯一必须设置的属性,表示cookie的名称 expires       指定cookie的存活周期,如不设置,浏览器关闭自动失效 path           决定cookie对于服务器对于其他网页的可用性,一般情况下,   cookie对同一目录下的所有页面都可用,当设置path属性后,cookie只对指定路径及子路径下的所有网页有效 domain           

JavaScript中的字符串操作详解_javascript技巧

一.概述    字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更 多....JavaScript的核心部分提供了一组属性和方法用于通用的字符串操作,如分割字符串,改变字符串的大小写,操作子字符串等.    当前的大部分浏览器也能从强大的正则表达式获益,因为它极大地简化了大量的字符串操作任务,不过它也需要你克服一条有些陡峭的学习曲线.在这里,主要是介绍字符串本身的一些操作,正则表达式会在以后的随笔中涉及. 二