JavaScript中的window对象常用属性方法讲解

概述:

window 对象表示一个包含 DOM 文档的窗口,其document属性指向窗口中载入的 DOM 文档 。使用 document.defaultView 属性可以获取指定文档所在窗口。

window作为全局变量,代表了脚本正在运行的窗口,暴露给 Javascript 代码。在有标签页功能的浏览器中,每个标签都拥有自己的 window 对象;也就是说,同一个窗口的标签页之间不会共享一个 window 对象。有一些方法,如 window.resizeTo 和 window.resizeBy 之类的方法会作用于整个窗口而不是 window 对象所属的那个标签。一般而言,如果一样东西无法恰当地作用于标签,那么它就会作用于窗口。

它包含如下子对象

子对象说明
document 文档对象,用于操作页面元素
location 地址对象,用于操作URL地址
navigator 浏览器对象,用于获取浏览版本信息
history 历史对象,用于操作浏览历史
screen 屏幕对象,用于操作屏幕宽度高度
frames 类数组对象,返回当前窗口的所有直接子窗口。

window对象的相关属性

1.innerHeight属性

语法格式:window.innerheight=数值
功能:返回或指定浏览器窗口中文档的像素高度,这个高度不包括任何工具栏和组成窗口的页面修饰高度。
注:ie5.5不支持该属性。

2.innerWidth属性

语法格式:window.innerheight=数值
功能:返回或指定浏览器窗口中文档的像素宽度,这个宽度不包括任何工具栏和组成窗口的页面修饰宽度。
注:ie5.5不支持该属性。

3.parent属性

语法格式:window.parent.frames[数值] window.parent.framesname
功能:访问各个子窗口(多框架)所在的父窗口。

4.pageXOffset属性

语法格式:window.pageXOffset=数值
功能:指定浏览器窗口中文档左上角在窗口中的当前水平像素位置。在利用moveto移动之前,可以通过该属性来决定是否需要移动窗口。因为该属性返回了可见文档相对整个页面的当前位置。
注:ie5.5不支持该属性。

5.pageYOffset属性

语法格式:window.pageYOffset=数值
功能:指定浏览器窗口中文档左上角在窗口中的当前垂直像素位置。在利用moveto移动之前,可以通过该属性来决定是否需要移动窗口。因为该属性返回了可见文档相对整个页面的当前位置。
注:ie5.5不支持该属性。

6.window.length属性

返回当前窗口中包含的框架数量 (框架包括frameiframe两种元素).

window对象的相关方法

一、控制台打印方法

1.console.log('日志') //控制台 log日志 以日志的形式打印

2.console.error('错误') //以错误的形式打印

3.console.warn('警告') //以警告的形式打印

4.console.debug('测试') //以测试的形式打印

5.console.info('信息提示') //以信息提示的形式打印

二、弹窗方法

1.window.alert()  显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。

2.window.confirm() 显示一个具有一个可选消息和两个按钮 (确定和取消) 的模态对话框 。

var isTrue = confirm('你确认要删除吗') //交互框 点击确认返回true 取消返回false

console.log(isTrue);

3.window.prompt(text,value)  显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字,value是未输入时的默认值。

var str = prompt('请输入你的手机号')  //输入框 他会有个输入框让你输入返回对应的你输入的内容 (string的内容)

console.log(str);

三、打开关闭窗口方法

1.Window.open() 

用指定的名称将指定的资源加载到浏览器上下文(窗口window ,内嵌框架iframe,或者标签tab )。如果没有指定名称,则一个新的窗口会被打开并且指定的资源会被加载进这个窗口的浏览器上下文中。

参数:

第一个参数是url地址 第二个参数为title target(打开方式 _blank _self _parent) 第三个参数为设置的参数(窗口的高度 宽度等等)
height=100 窗⼝⾼度;
width=400 窗⼝宽度;
top=0 窗⼝距离屏幕上⽅的象素值;
left=0 窗⼝距离屏幕左侧的象素值;
toolbar=no 是否显⽰⼯具栏,yes为显⽰;
menubar,scrollbars 表⽰菜单栏和滚动栏。
resizable=no 是否允许改变窗⼝⼤⼩,yes为允许;
location=no 是否显⽰地址栏,yes为允许;
status=no 是否显⽰状态栏内的信息(通常是⽂件已经打开),yes为允许;
window.open('http://www.baidu.com','_blank','width=300,height=100,top=0,left=0')

2.Window.close() 

关闭当前窗口或某个指定的窗口。

关闭一个由 window.open()方法打开的窗口

// 用于存储将要打开的窗口(的引用)的全局变量
var openedWindow;

function openWindow() {
  openedWindow = window.open('moreinfo.htm');
}

function closeOpenedWindow() {
  openedWindow.close();
}

当直接调用 window 对象的 close() 方法而非在一个 window 实例上调用 close() 时,浏览器会关闭当前的窗口,无论是不是你的脚本创建的这个窗口。(Firefox 35.0.1:脚本不能关闭不是他打开的窗口)

function closeCurrentWindow() {
  window.close();
}

 

四、改变窗口位置的方法

window.moveBy(100,100) //X+100 Y+100 根据指定的值,移动当前窗口。
window.moveTo(200,200) //X=200 Y=200 将当前窗口移动到指定的坐标位置。

五、改变窗口大小的方法

//改变对应的窗口大小
window.resizeBy(200,200) //width+200 height+200
//动态调整窗口的大小。
window.resizeTo(200,200) //width=200 height=200 

六、打印当前页面的方法

//print打印当前页面
window.print()

只打印部分内容:

方案一:使用将需要打印内容放入iframe标签中

方案二:将需要打印内容以外的内容都全部删除,打印完后刷新界面

七、聚焦和失焦的方法

//focus 聚焦  blur 失去焦点
window.focus()
window.blur()

八、查找方法

//find查找 ctrl+f  用于查找文档中的特定字符和数字及行号
window.find()

九、将页面滚动到指定位置

//滚动栏位置改变  初始位置 x:0,y:0
window.scorll(500,500) //到达位置 x=500 y=500
window.scrollBy(100,100) //原本的位置 x+100,y+100 
window.scrollTo(500,500) //到达位置 x=500 y=500 与window.scorll一致但兼容性较差

 

了解更多:https://developer.mozilla.org/zh-CN/docs/Web/API/Window





posted @ 2022-08-03 21:35  Lamb~  阅读(2854)  评论(0编辑  收藏  举报