一. window对象

BOM 的核心对象是 window ,它表示浏览器的一个实例。在浏览器中, window 对象有双重角色,

它既是通过 JavaScript 访问浏览器窗口的一个接口,又是 ECMAScript 规定的 Global 对象。

通过window可以操作整个浏览器。

BOM图谱:

window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象。


二. 全局作用域

由于 window对象同时扮演着 ECMAScriptGlobal 对象的角色,

因此所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法。

注意:有三种获取全局变量的方式。

<script type="text/javascript">
    var age = 29;    //声明一个全局变量
    function sayAge() {    //声明一个全局函数
        alert(this.age);//this表示,调用这个函数时使用的对象。将来是通过window调用的,所以this指代的window
    }
    // 全局变量成为了window对象的属性。 所以可以通过window.age访问
    alert(window.age); //29
    sayAge(); //29
    // 全局函数成为了window对象的方法。 所以可以通过window.sagAge() 来访问。
    window.sayAge(); //29
</script>
//提示:虽然可以通过window对象来调用,但是实际开发的时,一般都省略window。

三. 获取窗口大小

  1. Internet Explorer(9+)、Chrome、Firefox、Opera 以及 Safari

    • window.innerHeight - 浏览器窗口的内部高度

    • window.innerWidth - 浏览器窗口的内部宽度

    var msg = "窗口宽度:" + window.innerHeight + "\n窗口高度:" + window.innerWidth;
    alert(msg );
    
  2. 对于 Internet Explorer 8、7、6、5:(ChromeFirefox也支持)

    • document.documentElement.clientHeight

    • document.documentElement.clientWidth

    var msg = "窗口宽度:" + document.documentElement.clientWidth + "\n窗口高度:" + document.documentElement.clientHeight;
    alert(msg);
    
  3. 为了兼容浏览器的版本可以使用下面的代码(可以涵盖所有的浏览器)
    var w = window.innerWidth || document.documentElement.clientWidth;
    var h = window.innerHeight || document.documentElement.clientHeight;
    alert("窗口宽度:" + w + "\n窗口高度:" + h);
    

四. 打开窗口

var w = open(url,name[,features])

方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。

  • 返回值w是打开的新窗口的引用.(也就是新窗口内部的那个window对象)

  • url: 新窗口需要载入的url地址。url可以是web上的html页面也可以是图片文件或者其他任何浏览器支持的文件格式。

    • 如果为空字符串, 则打开一个新的空白文档
  • name: 新窗口的名称.

    • 注意不是新窗口的标题

    • _blank就是打开新文档. 如果传空字符串就是这个.

    • _self 在当前页面打开新的文档

    • abcd 打开如果名字已经存在, 则会在哪个页面重新打开.

  • features: 一些可选参数, 列出新窗口的一些特征.

  • 打开新的窗口,窗口特性全部使用默认值

<body>
<button onclick="openAnother();">打开新窗口</button>
<script type="text/javascript">
function openAnother () {
   window.open("http://www.atguigu.com/"); //打开新窗口,窗口特性全部使用默认值。
}
</script>
</body>

  • 打开新的窗口,设置窗口特性
<body>
<button onclick="openAnother();">打开新窗口</button>
<script type="text/javascript">
var win;
function openAnother () {
   win = window.open("http://www.atguigu.com/", "", "width=400, height=400, toolbar = no, menubar = no,left = 200, right = 200");
}
</script>
</body>
Copyright © 李振超 2018 all right reserved,powered by Gitbook
该文件最后修订时间: 2018-10-18 03:19:29

results matching ""

    No results matching ""