DOM-浏览器对象

window对象方法

window对象方法
  • 1、一个浏览器窗口就是一个window对象;
  • 2、window对象是最核心的对象,document对象、history对象等都是window对象的子对象

打开和关闭窗口

  • 在JavaScript中,我们可以使用window对象中的open()方法来打开一个新窗口
语法:window.open(URL, 窗口名称, 参数);

说明:

  • URL:指的是打开窗口的地址,如果URL为空字符串,则浏览器打开一个空白窗口,并且可以使用document.write()方法动态输出HTML文档。
  • 窗口名称:指的是window对象的名称,可以是a标签或form标签中target属性值。如果指定的名称是一个已经存在的窗口名称,则返回对该窗口的引用,而不会再新打开一个窗口。
  • 参数:对打开的窗口进行属性设置


    参数以及说明
  • 此外还需要注意一点,window.open()方法中的参数width和height设置的时候是不需要加单位(px)的,浏览器默认就已经给我们添加单位
JavaScript关闭窗口
  • 在JavaScript中,我们可以使用window对象中的close()方法来关闭一个窗口
  • 在JavaScript中,如果想要关闭当前的窗口,有3种方式:
  • 1、关闭当前窗口
window.close();
close();
this.close();
  • 2、关闭子窗口
  • 所谓的“关闭子窗口”就是关闭之前使用window.open()方法动态创建的子窗口
语法:窗口名.close();
  • 说明:使用window.open()方法动态创建的窗口时,我们可以将窗口以变量形式保存,然后再使用close()方法关闭动态创建的窗口

改变窗口大小

  • 在JavaScript中,可以使用window对象的resizeTo()方法或resizeBy()方法来改变窗口的大小
window.resizeTo(x, y)
  • x表示改变后的水平宽度,y表示改变后的垂直高度。x和y的单位都是px,浏览器自带单位,我们只需要使用数值即可
window.resizeBy(x, y)
  • 当x、y的值大于0时为扩大,小于0时为缩小。其中x和y的单位都是px。
  • x表示窗口水平方向每次扩大或缩小的数值,y表示垂直方向窗口每次扩大或缩小的数值。
  • resizeTo(x,y)与resizeBy(x,y)不同在于:resizeTo(x,y)中的x、y是“改变后”的数值,而resizeBy(x,y)中的x、y是“增加或减少”的数值。“to”表示一个结果,“by”表示一个过程

窗口历史

  • 在JavaScript中,我们使用window对象中的history对象进行访问窗口历史。很多人对“window对象中的history对象”这一句不太理解,其实“对象里面也可以有子对象”的
一、history对象属性
history对象属性
2、history对象方法
history对象方法
  • 我们常见的“上一页”与“下一页”实现代码如下:
<a href="javascript:window.history.forward();">下一页</a>
<a href="javascript:window.history.back();">上一页</a>
  • 注意一下,这种“上一页”与“下一页”是针对浏览器历史记录而言,不能用来制作类似绿叶学习网那种分页特效。两者是完全不同的概念!


    分页效果
  • 当然,我们还可以使用hisotry.go()方法指定要访问的历史记录。若参数为正数,则向前移动;若参数为负数,则向后移动,例如:
<a href="javascript:window.history.go(-1);">向后退1次</a>
<a href="javascript:window.history.back(2);">向后前进2次</a>
  • 使用history.length属性能够访问history数组的长度,可以很容易地转移到列表的末尾,例如:
<a href="javascript:window.history.length-1;">末尾</a>
  • 在JavaScript中,操作窗口历史语法很简单,也不是那么常用。一般情况下,在404页面中,为了用户体验,往往会有一个提供“返回上一页”的选项,这其中就用到了下面这种语法:
<a href="javascript:window.history.go(-1);">返回上一页</a>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,980评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,178评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,868评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,498评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,492评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,521评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,910评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,569评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,793评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,559评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,639评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,342评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,931评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,904评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,144评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,833评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,350评论 2 342

推荐阅读更多精彩内容