初学JavaScript--基础知识笔记（二）

怼烎@ 2023-10-17 14:47 2阅读 0赞

#### window对象 ####

window对象不但充当全局作用域，而且表示浏览器窗口。

> window对象有双重角色：既是通过js访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

**所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法**。全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。

var age = 29;
        window.color = "red";
    
        //throws an error in IE < 9, 在其他浏览器中返回false
        delete window.age;
        //throws an error in IE < 9, 在其他浏览器中返回true
        delete window.color;    //returns true
    
        alert(window.age);      //29
        alert(window.color);    //undefined

*  **窗口关系**

每个框架都有自己的window对象，并且保存在frames集合中。

<head>
        <title>Frameset Example</title>
    </head>
    <frameset rows="160,*">
        <frame src="frame.htm" name="topFrame">
        <frameset cols="50%,50%">
            <frame src="anotherframe.htm" name="leftFrame">
            <frame src="yetanotherframe.htm" name="rightFrame">
        </frameset>
    </frameset>

top对象始终指向最高层的框架，即浏览器窗口。与top相对的另一个window对象是parent。**在没有框架的情况下，parent一定等于top**

<head>
        <title>Frameset Example</title>
    </head>
    <frameset rows="100,*">
        <frame src="frame.htm" name="topFrame">
        <frameset cols="50%,50%">
            <frame src="anotherframe.htm" name="leftFrame">
            <frame src="anotherframeset.htm" name="rightFrame">
        </frameset>
    </frameset>

*  **窗口位置**

screenLeft和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。

<body>
        <p>This will open a new window/tab:
        <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/')"></p>
        <p>This will open in the current window/tab:
        <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/', '_self')"></p>
    </body>

使用moveTo()和moveBy()可以将窗口精确的移动到一个新位置。都是接收2个参数，moveTo()接收的是新位置的x和y坐标值，moveBy()接收的是在水平和垂直方向上移动的像素数。

*  **窗口大小**

window对象有innerWidth和innerHeight属性，可以获取浏览器窗口的内部宽度和高度。表示该容器中页面视图区的大小，内部宽高是指除去菜单栏、工具栏、边框等占位元素后，用于显示网页的净宽高。

对应的，还有一个outerWidth和outerHeight属性，可以获取浏览器窗口的整个宽高。返回浏览器窗口本身的尺寸。

**在Chrome中，innerWidth和innerHeight与outerWidth和outerHeight返回相同的值。**

虽然无法确定浏览器窗口本身的大小，但是可以取得页面视口的大小。

使用resizeATo()和resizeBy()方法可以调整浏览器窗口大小。接收2个参数，resizeTo()接收浏览器窗口的新宽度和新高度，resizeBy()接收新窗口与原窗口的宽度和高度之差。

*  **导航和打开窗口**
    
    > 使用window.open()方法可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。此方法可以接收4个参数：要加载的URL、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
    
    window.open(“[http://www.baidu.com/][http_www.baidu.com]“, “topFrame”)  
    //等同于

window.open()会返回一个指向新窗口的引用，调用close()方法可以关闭新打开的窗口。新创建的window对象有一个opener属性，保存着打开它的原始窗口对象。

**将opener属性设置为null就是告诉浏览器新创建标签页不需要与打开它的标签页通信，可以在独立的进程中进行。**

检测弹出窗口是否被屏蔽

*  **间歇调用和超时调用**

超时调用需要使用setTimeout()方法，接收2个参数：要执行的代码和以毫秒表示的时间。

//不建议使用!
        setTimeout("alert('Hello world!') ", 1000);
    
        //推荐方法
        setTimeout(function() { 
            alert("Hello world!"); 
        }, 1000);

只要在指定的时间尚未过去之前调用clearTimeout()，就可以完全取消超时调用。

//设置超时调用
        var timeoutId = setTimeout(function() {
            alert("Hello world!");
        }, 1000);
    
        //注意：把它取消
        clearTimeout(timeoutId);

**超时调用在全局作用域中执行的，因此函数中this值在非严格模式下指向window对象，在严格模式下是undefined。**

间歇调用：按照指定的时间间隔重复执行代码，直至被取消或页面被卸载。接收2个参数：要执行的代码和每次执行之前需要等待的毫秒数。

//不建议使用!
        setInterval("alert('Hello world!') ", 10000);
    
        //推荐方法
        setInterval(function() { 
            alert("Hello world!"); 
        }, 10000);

要取消尚未执行的间歇调用，可以使用clearInterval()方法并传入相应的间歇调用ID。

var num = 0;
        var max = 10;
        var intervalId = null;
    
        function incrementNumber() {
            num++;
    
            //如果执行次数达到max设定的值，则取消后续尚未执行的调用
            if (num == max) {
                clearInterval(intervalId);
                alert("Done");
            }
        }
    
        intervalId = setInterval(incrementNumber, 500);

变量num每半秒钟递增一次，递增到最大值时就取消调用。

*  **系统对话框**

浏览器通过alert(),confirm(),prompt()方法调用系统对话框向用户显示消息。

>  *  alert()：接收一个字符串并将其显示给用户。
>  *  confirm()：除了显示OK外，还会显示Cancel取消按钮。
>  *  prompt()：提示框，用于提示用户输入一些文本。除了OK和Cancel按钮外，还会显示一个文本输入域，以供用户在其中输入内容。接收2个参数：要显示给用户的文本提示和文本输入域的默认值。

//显示“打印”对话框
    window.print();
    //显示“查找”对话框
    window.find();

#### location对象 ####

location对象既是window对象的属性，也是document对象的属性。

创建一个函数，用以解析查询字符串，然后返回包含所有参数的一个对象：

使用location对象可以通过很多方式改变浏览器位置。

>  *  location.assign(“[http://www.baidu.com][http_www.baidu.com 1]“);
>  *  window.location=”http://www.baidu.com”;
>  *  location.href=”http://www.baidu.com”;

可以通过将hash,search,hostname,pathname,port属性设置为新值来改变URL。通过这些方法修改后，浏览器的历史记录都会生成一条新纪录，用户通过单击“后退”可导航到前一个界面。若要禁用此行为，可使用replace()方法，该方法接收一个参数：要导航到的URL，结果不会在历史记录中生成新纪录。

reload():重新加载当前显示的页面。若要强制从服务器重新加载，方法如下：

location.reload();//有可能从缓存中加载
    location.reload(true);//从服务器重新加载

可以用location.href获取。要获得URL各个部分的值，可以这么写：

location.protocol; // 'http'
    location.host; // 'www.example.com'
    location.port; // '8080'
    location.pathname; // '/path/index.html'
    location.search; // '?a=1&b=2'
    location.hash; // 'TOP'

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

#### navigator对象 ####

navigator对象表示浏览器的信息，最常用的属性包括：

*  navigator.appName：浏览器名称；
 *  navigator.appVersion：浏览器版本；
 *  navigator.language：浏览器设置的语言；
 *  navigator.platform：操作系统类型；
 *  navigator.userAgent：浏览器设定的User-Agent字符串。
    
        //检测插件（在IE中无效）
        function hasPlugin(name){
            name = name.toLowerCase();
            for (var i=0; i < navigator.mimeTypes.length; i++){
                if (navigator.mimeTypes[i].name.toLowerCase().indexOf(name) > -1){
                    return true;
                }
            }
        
            return false;
        }
        
        //检测 flash
        alert(hasPlugin("Flash"));
        
        //检测 quicktime
        alert(hasPlugin("QuickTime"));
        
        //detect Java
        alert(hasPlugin("Java"));

这个例子中hasPlugin()接收一个参数：要检测的插件名。

//检测IE中的插件
        function hasIEPlugin(name){
            try {
                new ActiveXObject(name);
                return true;
            } catch (ex){
                return false;
            }
        }
    
        //检测 flash
        alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));
    
        //检测 quicktime
        alert(hasIEPlugin("QuickTime.QuickTime"));

这个例子中hasIEPlugin()只接收一个COM标识符作为参数。

//plugin detection - doesn't work in IE
        function hasPlugin(name){
            name = name.toLowerCase();
            for (var i=0; i < navigator.plugins.length; i++){
                if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                    return true;
                }
            }
    
            return false;
        }        
    
        //plugin detection for IE
        function hasIEPlugin(name){
            try {
                new ActiveXObject(name);
                return true;
            } catch (ex){
                return false;
            }
        }
    
        //detect flash for all browsers
        function hasFlash(){
            var result = hasPlugin("Flash");
            if (!result){
                result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
            }
            return result;
        }
    
        //detect quicktime for all browsers
        function hasQuickTime(){
            var result = hasPlugin("QuickTime");
            if (!result){
                result = hasIEPlugin("QuickTime.QuickTime");
            }
            return result;
        }
    
        //detect flash
        alert(hasFlash());
    
        //detect quicktime
        alert(hasQuickTime());

请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：

var width;
    if (getIEVersion(navigator.userAgent) < 9) {
        width = document.body.clientWidth;
    } else {
        width = window.innerWidth;
    }

但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：

var width = window.innerWidth || document.body.clientWidth;

#### history对象 ####

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward()，相当于用户点击了浏览器的“后退”或“前进”按钮。  
使用go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。

history.go(-1);//后退一页
    history.go(1);//前进一页
    history.back();//后退一页
    history.forword();//前进一页

[http_www.baidu.com]: http://www.baidu.com/
[http_www.baidu.com 1]: http://www.baidu.com