没有合适的资源?快使用搜索试试~ 我知道了~
Javascript中浏览器窗口的基本操作总结
0 下载量 131 浏览量
2020-10-21
17:35:31
上传
评论
收藏 81KB PDF 举报
温馨提示
试读
4页
BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是window。说窗口,可能并不准确。因为,有的浏览器窗口可能包含多个标签页,每个标签页都有自己的window对象。本文将详细介绍这些内容,有需要可以参考学习。
资源详情
资源评论
资源推荐
Javascript中浏览器窗口的基本操作总结中浏览器窗口的基本操作总结
BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是
window。说窗口,可能并不准确。因为,有的浏览器窗口可能包含多个标签页,每个标签页都有自己的window
对象。本文将详细介绍这些内容,有需要可以参考学习。
窗口位置窗口位置
【【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>
weixin_38606656
- 粉丝: 4
- 资源: 896
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 三维装箱问题(Three-Dimensional Bin Packing Problem,3D-BPP)是一个经典的组合优化问题
- 以下是一些关于Linux线程同步的基本概念和方法.txt
- 以下是一个简化的示例,它使用pygame库来模拟烟花动画的框架.txt
- Linux线程同步机制深度解析与实用指南.zip
- PTA题库C语言解题策略与实战.rar
- SVPWM控制技术的simulink建模与仿真【包括simulink模型,参考文献,操作步骤】
- AI高清修复图片画质易语言易语言源码易语言填表
- 映射窗口.ec易语言易语言模块CPU占用0%游戏监控窗口监控
- 易语言 361窗口模块高效、便捷、自封装、自用
- 易语言 窗口排列 模块 ,简单、高效、体积小
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0