JavaScript操纵窗口的方法小结


Posted in Javascript onJune 28, 2013

在前面的介绍中,我们讨论过close()方法:

win = window.open("https://3water.com/", "js");

win.close();

JavaScript提供了许多方法与属性,我们可以使用它们来控制窗口。

移动、滚动、改变大小

下面的方法(N4+,IE4+)负责个定窗口的移动、滚动以及大小改变操作:

// 移动窗口的屏幕位置到指定的偏移x 、y(绝对移动)

window.moveTo(iX, iY)

// 移动窗口的屏幕位置到指定的偏移x 、y(相对移动)

window.moveBy(iX, iY)

// 滚动窗口的屏幕位置到指定的偏移x 、y(绝对滚动)

window.scrollTo(iX, iY)

// 滚动窗口的屏幕位置到指定的偏移x 、y(相对滚动)

window.scrollBy(iX, iY)

// 改变窗口大小到指定的高度与宽度(绝对改变大小)

window.resizeTo(iWidth, iHeight)

// 改变窗口大小到指定的高度与宽度(相对改变大小)

window.resizeBy(iX, iY)

注意,这些方法都属于window对象,所以它们智能在当前窗口或者其他可以引用的窗口被执行。如果你想动态设置窗口的位置和尺寸,就可以在窗口创建后使用move和resize方法。

//form

注意,控制一个包含其他服务器页面的窗口是不可能的。

最大化窗口

我们现在来介绍如何制作一个点击后可最大化窗口的按钮。

下面看看有关这个按钮的HTML和JavaScript代码:

<SCRIPT LANGUAGE="JavaScript">

<!--

function maximizeWin() {

if (window.screen) {

var aw = screen.availWidth;

var ah = screen.availHeight;

window.moveTo(0, 0);

window.resizeTo(aw, ah);

}

}

// -->

</SCRIPT>

<FORM><INPUT TYPE="button" VALUE="Maximize" onClick="maximizeWin()"></FORM>

注意,resizeTo()方法引用整个窗口的尺寸。 //form

一个悬浮的广告

在网站上,通过移动广告窗口,能够吸引浏览者的注意力。我们可以通过调用下面的函数来实现让窗口左右移动的效果:

function makeAd() {

window.open("adpage.html", "ad", "width=468,innerWidth=468,height=80,innerHeight=80,left=0,top=0");

}

下面是页面adpage.html的代码:

<SCRIPT LANGUAGE="JavaScript">

<!--

function startAd() {

if (window.screen) {

pos = 0;

aw = screen.availWidth;

window.moveTo(pos, 0);

timerID = setInterval("moveAd()", 50);

}

}

function moveAd() {

if (pos <= 0) inc = 5;

// 5 - so it doesn't pass the right edge

// 10 - accounts for the window chrome

if (pos + 468 + 10 + 5 > aw) inc = -5;

pos += inc; a380fa.com

window.moveTo(pos, 0);

}

window.onload = startAd;

// -->

</SCRIPT>

当页面adpage.html装载后,函数startAD()被执行。如果用户的浏览器支持window.screen对象,窗口才能移动,因为我们需要使用window.screen来计算屏幕的宽度。窗口在屏幕的上边界滑动,从左上角(pos=0)一直到右上角。

通过内建的setInterval()函数,每隔50毫秒移动广告窗口5个象素。如果点击了“stop”按钮,就将执行下面

Javascript 相关文章推荐
js setTimeout opener的用法示例详解
Oct 23 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
原生js实现数字字母混合验证码的简单实例
Dec 10 Javascript
javascript中闭包(Closure)详解
Jan 06 Javascript
JS判断数组那点事
Oct 10 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
Mar 21 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
Dec 08 Javascript
微信小程序选择图片控件
Jan 19 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 #Javascript
js获取当前日期代码适用于网页头部
Jun 27 #Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 #Javascript
JQUERY实现左侧TIPS滑进滑出效果示例
Jun 27 #Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 #Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 #Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 #Javascript
You might like
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
最新优化收藏到网摘代码(digg,diigo)
2007/02/07 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
JQuery循环滚动图片代码
2011/12/08 Javascript
jQuery.clean使用方法及思路分析
2013/01/07 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
jquery+CSS3实现3D拖拽相册效果
2016/07/18 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
基于vue如何发布一个npm包的方法步骤
2019/05/15 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
python 处理微信对账单数据的实例代码
2019/07/19 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python验证码图片处理(二值化)
2019/11/01 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
Python如何读取、写入CSV数据
2020/07/28 Python
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
招商专员岗位职责
2014/02/08 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书
学生会辞职信
2015/03/02 职场文书
药品开票员岗位职责
2015/04/15 职场文书
初中历史教学反思
2016/02/19 职场文书