Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window 对象会在 < body> 或 < frameset> 每次出现时被自动创建。
一、Window对象属性
1.closed
返回窗口是否已被关闭
<script>
var myWindow = window.open('https://www.baidu.com/', '百度', 'width=500,height=500')
var loop = setInterval(function() {
if(myWindow.closed) {
clearInterval(loop);
alert('closed');
}
}, 1000);
</script>
2.frames
返回窗口中< iframe>框架集合。
<iframe src="./echo.xhtml" name="echo" width="400" height="300" scrolling="no"></iframe>
<iframe src="./index.xhtml"></iframe>
<script>
var frm = frames["echo"];
alert(frames.length)
alert(frm.location + '读取不到,说明 iframe框架 在脚本执行完构建')
window.addEventListener("load", function() {
alert(frm.location)
alert(frm.name)
alert(frm.document.body.style.fontSize)
}, false);
</script>
3.defaultStatus
defaultStatus 属性可设置或返回窗口状态栏中的默认文本。该属性可读可写。
该文本会在页面加载时被显示。
注意: defaultStatus属性在IE,火狐,Chrome,和Safari默认配置是不能正常工作。要允许脚本来改变状态栏文本,用户必须把配置屏幕首选项设置为false dom.disable_window_status_change。(或在Firefox:”工具 - 选项 - 内容 - 启用的JavaScript /”高级” - 允许脚本更改状态栏文本”)。
<script>
window.defaultStatus="这是默认状态栏文本! !";
</script>
4.innerHeight 和 innerWidth
获取窗口的高度与宽度(不包含工具条与滚动条)
注意:IE 8 及更早 IE版本不支持这两个属性。
var w=window.innerWidth;
var h=window.innerHeight;
5.outerHeight 和 outerWidth
outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。
outerWidth属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。
注意:IE 8 及更早 IE版本不支持这两个属性。
var w=window.outerWidth;
var h=window.outerHeight;
6.opener
opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。
opener 属性非常有用,创建的窗口可以引用创建它的窗口所定义的属性和函数。
注意:只有表示顶层窗口的 Window 对象的 operner 属性才有效,表示框架的 Window 对象的 operner 属性无效。
<script type="text/javascript">
function parentFun() {
alert('调用创建MyName窗口 的窗口 的函数成功!(调用父级窗口函数)')
}
var myWindow = window.open('','MyName','width=200,height=100')
myWindow.opener.parentFun()
</script>
7.top
top 属性返回最顶层的先辈窗口。
该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口,top 属性存放对窗口自身的引用。如果窗口是一个框架,那么 top 属性引用包含框架的顶层窗口。
8.parent
parent属性返回当前窗口的父窗口。
9.self
self 属性可返回对窗口自身的只读引用。等价于 Window 属性。
//在顶层页面打开url(跳出框架)
top.location.href = "url"
//在父窗口打开url地址
parent.location.href = "url"
//仅在本页面打开url地址
self.location.href = "url"
实际中可能这样使用,判断当前location 是否为顶层,来禁止frame引用。
if (top.location !== self.location) {}
10.document
对 Document 对象的只读引用。
11.history
对 History 对象的只读引用。
12.location
用于窗口或框架的 Location 对象。
13.navigator
对 Navigator 对象的只读引用。
14.screen
对 Screen 对象的只读引用。
二、Window对象方法
1.alert()
2.blur()
blur() 方法可把键盘焦点从顶层窗口移开。
3.focus()
focus() 方法可把键盘焦点给予一个窗口。
4.open()
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,specs,replace)
参数 | 说明 | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
URL | 可选。打开指定的页面的URL。如果没有指定URL,打开与新的空白窗口 | ||||||||||||||||||||||||||||
name | 可选。指定target属性或窗口的名称。支持以下值:
|
||||||||||||||||||||||||||||
specs | 可选。一个逗号分隔的项目列表。支持以下值:
| ||||||||||||||||||||||||||||
replace | Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
|
6.close()
close() 方法用于关闭浏览器窗口。
7.confirm(msg)
confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
如果访问者点击”确定”,此方法返回true,否则返回false。
<script type="text/javascript">
deleteFun()
function deleteFun(){
if (window.confirm('确认删除?')) {
alert('删除了')
} else {
alert('暂时不删了')
}
}
</script>
8.prompt(msg,defaultText)
prompt()方法用于显示可提示用户进行输入的对话框。
这个方法返回用户输入的字符串。
<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var x;
var person=prompt("请输入你的名字", "Harry Potter");
if (person != null && person != "") {
x = "你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML = x;
}
}
</script>
9.setInterval()
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<input type="text" id="clock" />
<script>
var flag = self.setInterval(function(){
document.getElementById("clock").value = new Date().toLocaleTimeString();
},1000);
</script>
10.clearInterval(id_of_setinterval)
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
clearInterval(flag)
11.setTimeout(code,millisec,lang)
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
millisec | 必需。在执行代码前需等待的毫秒数。 |
lang | 可选。脚本语言可以是:JScript | VBScript | JavaScript |
var t = setTimeout(function(){alert("Hello")}, 3000)
12.clearTimeout(id_of_settimeout)
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。
clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
clearTimeout(t)
13.moveBy()、moveTo()、resizeBy()、resizeTo()、scrollBy()、scrollTo()
这些暂时没有用到过,简单测试了几个,效果不是很理想,等用到了再做补充。
window.moveBy(x,y) | moveBy() 方法可相对窗口的当前座标把它移动指定的像素。 |
window.moveTo(x,y) | moveTo() 方法可把窗口的左上角移动到一个指定的座标。 |
resizeBy(width,height) | resizeBy() 方法用于根据指定的像素来调整窗口的大小。 注意: 此方法定义指定窗口的右下角角落移动的像素,左上角将不会被移动(它停留在其原来的座标). |
window.resizeTo(width,height) | 方法用于把窗口大小调整为指定的宽度和高度。 |
scrollBy(xnum,ynum) | scrollBy() 方法可把内容滚动指定的像素数。 注意: 要使此方法工作 window 滚动条的可见属性必须设置为true! |
scrollTo(xpos,ypos) | scrollTo() 方法可把内容滚动到指定的座标。 |