美文网首页
DOM-浏览器对象

DOM-浏览器对象

作者: 挥剑斩浮云 | 来源:发表于2018-03-11 19:36 被阅读0次

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>

相关文章

  • DOM-浏览器对象

    window对象方法 1、一个浏览器窗口就是一个window对象; 2、window对象是最核心的对象,docum...

  • 2.JavaScript优化-DOM

    DOM优化 一、DOM与JavaScript 浏览器会把DOM与js独立实现-像两个独立的小岛 js操作dom-从...

  • DOM-事件对象8

    04-鼠标跟随.html 05-鼠标在盒子中的坐标.html 07-拖拽案例.html 08-模拟滚动条.html...

  • jQuery选择器_Dom操作_样式_事件处理_动画

    题目1: jQuery 能做什么? -更方便的操作DOM-统一了不同浏览器的API接口-轻松实现动画效果-可以:选...

  • 浏览器相关内容

    一、浏览器内置对象 什么是浏览器对象模型 BOM :Browser Object Model(浏览器对象模型),浏...

  • BOM和DOM编程

    BOM(browser object model):浏览器对象模型 浏览器:windows对象 Window 对象...

  • BOM

    BOM 浏览器对象模型 BOM(Browser Object Model)是指浏览器对象模型,浏览器对象模型提供来...

  • JavaScript(BOM-API预览)

    window对象属性 //在浏览器中,window对象指当前的浏览器窗口,它也是所有对象的顶层对象。浏览器环境的所...

  • JavaScript Window - 浏览器对象模型(9/11

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。 浏览器对象模型 (BOM) 浏览器...

  • 1 js之window

    浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话” 1 浏览器对象模型 (BOM)浏览器...

网友评论

      本文标题:DOM-浏览器对象

      本文链接:https://www.haomeiwen.com/subject/vmiwfftx.html