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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
jQuery $.get 的妙用 访问本地文本文件
Jul 12 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
浏览器兼容性问题大汇总
Dec 17 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
20多个小事例带你重温ES10新特性(小结)
Sep 29 Javascript
原生js+canvas实现验证码
Nov 29 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
php不用正则采集速度探究总结
2008/03/24 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
高性能PHP框架Symfony2经典入门教程
2014/07/08 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery中before()方法用法实例
2014/12/25 Javascript
AngularJS基础 ng-keypress 指令简单示例
2016/08/02 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
JS Html转义和反转义(html编码和解码)的实现与使用方法总结
2020/03/10 Javascript
python自动化测试实例解析
2014/09/28 Python
Python找出list中最常出现元素的方法
2016/06/14 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python request使用方法及问题总结
2020/04/26 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
JBL英国官网:JBL UK
2018/07/04 全球购物
奢华的意大利皮革手袋:Bene Handbags
2019/10/29 全球购物
Java语言的优势
2015/01/10 面试题
护士自荐信怎么写
2013/10/18 职场文书
酒店端午节促销方案
2014/02/18 职场文书
婚前协议书范本
2014/04/15 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
高三数学教学反思
2016/02/18 职场文书
SQL写法--行行比较
2021/08/23 SQL Server