学习window对象

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属性或窗口的名称。支持以下值:
  • _blank - URL加载到一个新的窗口。这是默认
  • _parent - URL加载到父框架
  • _self - URL替换当前页面
  • _top - URL替换任何可加载的框架集
  • name - 窗口名称
specs 可选。一个逗号分隔的项目列表。支持以下值:

channelmode=yes|no|1|0 是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes|no|1|0 是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes|no|1|0 浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window,还必须在影院模式。仅限IE浏览器
height=pixels 窗口的高度。最小.值为100
left=pixels 该窗口的左侧位置
location=yes|no|1|0 是否显示地址字段.默认值是yes
menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
top=pixels 窗口顶部的位置.仅限IE浏览器
width=pixels 窗口的宽度.最小.值为100

replace Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:

  • true - URL 替换浏览历史中的当前条目。
  • false - 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() 方法可把内容滚动到指定的座标。



学习资料:http://www.runoob.com/jsref/obj-window.html

发布了44 篇原创文章 · 获赞 66 · 访问量 21万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章