JavaScript学习之窗口
窗口
一、Window 对象
Window 对象表示浏览器中打开的窗口。如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
1、对象属性
2、对象方法
二、打开窗口和关闭窗口
（一）打开窗口
1、使用open()方法打开新窗口
语法：
window.open("新窗口地址","新窗口名称","新窗口属性串");
2、open()方法常见属性
eg：
<html>
<head>
<title>打开窗口-属性设置</title>
<script language="JavaScript">
<!--
function open1(){
window.open("http://www.ds5u.com","","height=100,width=600,menubar=yes,toolbar=yes,scrollbars=yes");
}
function open2(){
window.open("http://www.ds5u.com","","height=400,width=300,toolbar=no,scrollbars=no");
}
//-->
</script>
</head>
<body>
<input type="button" onclick="open1()" value="打开">
<input type="button" onclick="open2()" value="打开">
</body>
</html>
（二）关闭窗口
1、使用close()方法关闭新窗口
语法：
如果要关闭本窗口：
window.close();
如果需要在父窗口里关闭弹出的新窗口：
var newwindow = window.open("网址，例如：http://www.baidu.com");
newwindow.close();
eg：
<html>
<head>
<title>关闭窗口</title>
<script language="JavaScript">
<!--
var windowobj;
function open1(){
windowobj = window.open("http://www.ds5u.com");
}
function close1(){
windowobj.close();
}
//-->
</script>
</head>
<body>
<input type="button" onclick="open1()" value="打开新窗口"/><br/>
<input type="button" onclick="close1()" value="关闭新窗口"/><br/>
<input type="button" onclick="window.close()" value="关闭本窗口"/>
</body>
</html>
如果在关闭本窗口时出现，收到浏览器的提示框（用来提醒用户是否确认关闭），可以在调用关闭窗口时调用如下代码取消这种提示：
window.opener = null；
三、延时设定（setTimeout())
1、setTimeout（）接受两个参数：第一个参数是需要执行的函数；第二个参数是延迟的毫秒数；
eg：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
<script language="JavaScript">
setTimeout("alert('延迟10秒！')",10000);
</script>
</head> <body>
</body>
</html>
效果：页面打开10秒之后弹出：
2、clearTimeout()方法：消除延迟。与setTimeout()方法相对应，通常搭配起来使用
四、时间间隔设定（setInterval()）
setInterval()方法：每隔一段时间会执行设定的函数，除非消除掉这个方法，否则会一直循环下去。setInterval()方法同样包含两个参数：第一个参数是需要执行的函数，第二个参数是时间间隔，单位是毫秒。消除时间间隔的设定，用clearInterval()方法。
eg：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title>
<script language="JavaScript">
setInterval("alert('每隔10秒提示！')",10000);
</script>
</head> <body>
</body>
</html>
五、移动窗口
窗口的移动分为两种方式：第一种是改变窗口与屏幕之间的相对位置；第二种是改变窗口内网页内容与窗口的相对位置。
1、使用moveTo()方法移动窗口到绝对位置
该方法接受两个参数，分别是窗口与屏幕在水平和垂直方向上的绝对位移
eg：
<script language="JavaScript">
<!--
window.moveTo(100,100);
//-->
</script>
2、使用moveBy()方法移动窗口到相对位置
该方法接受两个参数，分别是窗口与屏幕在水平和垂直方向上的相对位移
eg：
<script language="JavaScript">
<!--
window.moveBy(100,100);
//-->
</script>
3、使用scrollTo()方法滚动页面到窗口绝对位置
该方法接受两个参数，分别是页面与窗口在水平和垂直方向上的绝对位移
eg：
<script language="JavaScript">
<!--
window.scrollTo(100,100);
//-->
</script>
4、使用scrollBy()方法滚动页面到窗口相对位置
该方法接受两个参数，分别是页面与窗口在水平和垂直方向上的相对位移
eg：
<script language="JavaScript">
<!--
window.scrollBy(100,100);
//-->
</script>
六、改变窗口尺寸、使用状态栏
（一）改变窗口尺寸
1、使用resizeTo()方法改变窗口绝对尺寸
resizeTo()方法接受两个参数，分别是窗口的宽和高
eg:
<script language="JavaScript">
window.resizeTo(300,400);
</script>
2、使用resizeBy()方法改变窗口相对尺寸
所谓相对尺寸，就是在当前尺寸的基础上，再进行尺寸的增减。
eg：
<script language="JavaScript">
window.resizeBy(300,400);
</script>
（二）使用状态栏
状态栏是显示在浏览器窗口底部的一个提示区域。使用状态栏需要使用window对象的status属性。
eg：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js</title> </head> <body>
<script language="JavaScript">
window.status = "状态栏文字！";
</script>
设置状态栏！
</body>
</html>
七、常用的窗口对象
1、location对象：Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。
（1）对象属性
（2）对象方法
2、history对象：包含用户（在浏览器窗口中）访问过的 URL。
（1）对象方法
location.go(-1);与location.back()；效果是一样的。
3、navigator对象：包含有关浏览器的信息。
（1）对象属性
4、screen对象：包含有关客户端显示屏幕的信息。
（1）对象属性
JavaScript学习之窗口的更多相关文章
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
- JavaScript学习05 定时器
JavaScript学习05 定时器 定时器1 用以指定在一段特定的时间后执行某段程序. setTimeout(): 格式:[定时器对象名=] setTimeout(“<表达式>”,毫秒) ...
- Javascript学习8 - 脚本化文档(Document对象)
原文:Javascript学习8 - 脚本化文档(Document对象) 每个Web浏览器窗口(或帧)显示一个HTML文档,表示这个窗口的Window对象有一个document属性,它引用了一个Doc ...
- JavaScript学习总结(一)——ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引 ...
- JavaScript 引入方式 语言规范 语言基础 数据类型 常用方法 数组 if_else 比较运算符 for while 函数 函数的全局变量和局部变量 {Javascript学习}
Javascript学习 JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript ...
- JavaScript学习知识点归纳
JavaScript学习包括几大方面: 1.基础语法 2.JavaScript核心对象 3.DOM操作 4.BOM操作 5.正则表达式 6.AJAX 7.面向对象编程 以下依次为各版块相关内容==&g ...
- JavaScript学习(1)之JavaScript基础
JavaScript学习(1)之JavaScript基础 由于工作原因,开发语言逐渐以JavaScript为主,所以,抽空学习了下JavaScript语法.等现阶段的工作稳定之后,陆续会分享下自己在学 ...
- javaScript学习（4）框架学习
javaScript学习4 1.框架 在一个普通HTML文档载入浏览器的同时还创建了一个模型,这个模型始于一个window对象和它包含的文档.单框架窗口和文档很很简单,window下就是documen ...
- JavaScript 学习（3）核心对象
##JavaScript 学习 3 1.核心对象 1.1 String对象 声明和生成 var myString="Hello"; var myString=new String( ...
随机推荐
- 洛谷 P1019 单词接龙 Label:dfs
题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母,要求出以这个字母开头的最长的“龙”(每个单词都最多在“龙”中出现两次),在两个单词相连时,其重合 ...
- COJ574 数字序列
试题描述 霸中智力测试机构的一项工作就是按照一定的规则删除一个序列的数字,得到一个确定的数列.陈思同学很渴望成为霸中智力测试机构的主管,但是他在这个工作上做的并不好,俗话说熟能生巧,他打算做很多练 ...
- redis API使用说明
List相关: LPOP key : 删除并取得LIST头部一个元素 RPOP key : 删除并取得LIST尾部一个元素 BLPOP key [key ...] timeout : 删除并取得LIS ...
- Intent学习笔记
Intent首先字面意思大概是意图.负责activity之间或者,activity与service等(我只知道这么点)之间信息的传递.就跟快递员起的作用差不多(我这这么理解),由一下六部分组成: Co ...
- JS - 超强大文本动画插件Textillate.js
http://www.yyyweb.com/demo/textillate/ Textillate.js AsimplepluginforCSS3textanimations.
- 关于如何用php 获取当前脚本的url
关于用php 获取当前脚本的url很多朋友会说很简单,但是要获取很详细的就要经过多次判断哦. $PHP_TIME = time();$PHP_SELF = isset($_SERVER['PHP_SE ...
- [转]在Entity Framework中使用LINQ语句分页
本文转自:http://diaosbook.com/Post/2012/9/21/linq-paging-in-entity-framework 我们知道,内存分页效率很低.并且,如果是WebForm ...
- 【液晶模块系列基础视频】2.虚拟U盘
[液晶模块系列基础视频]2.虚拟U盘 ============================== 技术论坛:http://www.eeschool.org 博客地址:http://xiaomagee ...
- 移动Web应用开发入门指南——交互篇
交互篇 从PC到移动端,视觉和交互是用户能直接感受到的差异.在视觉篇中已经提到,移动设备的物理属性一部分影响到视觉,另外一些部分将影响到交互.那么,移动设备影响交互的物理属性都有哪些变化呢?对于这个问 ...
- 2016.09.14,英语,《Using English at Work》全书笔记
半个月时间,听完了ESLPod出品的<Using English at Work>,笔记和自己听的时候的备注列在下面.准备把每个语音里的快速阅读部分截取出来,放在手机里反复听. 下一阶段把 ...