学习window对象
来源:互联网 发布:2016淘宝不能刷单了 编辑:程序博客网 时间:2024/06/18 11:46
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)
- _blank - URL加载到一个新的窗口。这是默认
- _parent - URL加载到父框架
- _self - URL替换当前页面
- _top - URL替换任何可加载的框架集
- name - 窗口名称
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 | JavaScriptvar 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
- window.event对象学习
- js 学习 Window 对象
- JavaScript学习-window对象
- 学习window对象
- window对象的学习(一)
- window对象的学习(二)
- window对象的学习(三)
- window对象的学习(四)
- js学习手册--Window 对象
- javascript学习笔记 (三)-window对象
- Script的Window对象学习加深
- 客户端Javascript学习笔记-----Window对象
- JavaScript学习三 window,document对象
- JavaScript学习4:BOM之window对象
- 学习笔记:javascript 窗口对象(window)
- window对象
- window对象
- Window对象
- C#中奇妙的函数String.Split 和String.Join
- python 编码问题:'ascii' codec can't encode characters in position 的解决方案
- ios 上线过程中的图片截图的选取
- CString与string相互转换
- phpredis使用方法
- 学习window对象
- php那些容易被忽视的有用函数
- 在Spring Boot框架下使用WebSocket实现消息推送
- UITableView 左滑删除
- pclzip打包文件zip
- windows 查看端口占用以及解决办法
- Ue4导入视频黑屏原因
- Python图像批处理(图像重采样)
- Intellij Idea + ionic 环境配置的一些问题整理