JavaScript学习手册十六：浏览器对象模型

浏览器对象模型1.定时器任务描述相关知识(1)设置定时器（2）取消定时器代码文件2.循环定时器任务描述相关知识（1）定时（2）取消定时代码文件3.location对象任务描述相关知识（1）页面的跳转（2）location对象的其它属性代码文件4.对话框任务描述相关知识（1）警告框（2）确认框（3）输入框代码文件5.窗口任务描述相关知识（1）打开浏览器的窗口（2）关闭窗口代码文件1.定时器任务描述1

Bin今天学习了嘛

6136人浏览 · 2021-04-24 21:31:22

Bin今天学习了嘛 · 2021-04-24 21:31:22 发布

1.定时器

任务描述

1.本关任务：学习设置和取消定时器。

2.具体要求如下：

第一步，设置执行一次的定时任务timerTask()，延迟为2000毫秒，任务的唯一标识赋值给变量timeId。

2.循环定时器

任务描述

1.本关任务：取消指定的定时任务。

2.具体要求如下，请按步骤操作：

取消定时任务timerTask1()，要求使用本关介绍的方法。

3.location对象

任务描述

1.本关任务：读取主机名以及实现页面跳转。

2.具体要求如下：

第一步，获取location对象，赋值给变量loc；
第二步，利用loc打印出当前页面地址的主机名；
第三步，利用loc实现跳转到https://www.educoder.net/forums/categories/all?order=newest；
字符串参数放在英文双引号内。

4.对话框

任务描述

1.本关任务：练习输入型对话框的使用。

2.具体要求如下：

第一步：弹出一个输入型对话框（输入框），用户的输入结果赋值给变量result，输入框提示语为your name，输入框默认值为Xiao Ming；
第二步：使用result判断用户的输入是否为null（不是字符串null，是表示空的null），如果是，在控制台打印name cannot be null；
字符串类型的参数用""包含在内。

5.窗口

任务描述

1.本关任务：练习窗口的操作。

2.具体要求如下：

第一步，打开一个窗口，它的文档的地址是Demo.html，name属性是窗口名字window_name，specs和replace不用设置。将打开的窗口赋值给变量myWindow；
字符串参数放在英文双引号内。

相关知识

浏览器的一个标签页叫做一个窗口，window对象可以操作浏览器窗口的打开与关闭。

（1）打开浏览器的窗口

window.open(url,name,specs,replace)用来打开一个浏览器的窗口，它有四个参数：

url表示窗口里面的文档的地址；
name有两种情况。
如果name里面是窗口的名字。浏览器会先判断这个窗口是否已经打开。已经打开则用新的url里面的文档替换这个窗口里面原来的文档，反映到浏览器上是不会有新的标签页打开，但是一个已存在的标签页会刷新。没有打开则打开一个新的窗口，并且载入url里面的文档。
如果name是_blank、_self里面中的任何一个，它的含义如下：
specs是用来控制新窗口的尺寸等特征，比如值为width=200,height=100时，表示新窗口宽度为200px，高度为100px。
replace用来控制新的窗口在浏览器的浏览历史里面如何显示。为true表示装载到窗口的url替换掉浏览历史中的当前条目；为false表示装载到窗口的url创建一个新的条目。

下面的例子展示了这些参数的具体用法：

<body>
    <p onclick="openNewWindow()">name是一个窗口的名字，打开一个新的窗口，载入新的文档</p>
    <p onclick="openOldWindow()">name是一个窗口的名字，打开已存在的窗口，替换掉里面的文档</p>
    <p onclick="blankWindow()">name是一个target属性，值为_blank</p>
    <p onclick="selfWindow()">name是一个target属性，值为_self</p>
    <script>
        function openNewWindow() {
            window.open("Demo1.html", "windowName");
        }
        function openOldWindow() {
            window.open("Demo2.html", "windowName");
        }
        function blankWindow() {
            window.open("Demo1.html", "_blank");
        }
        function selfWindow() {
            window.open("Demo1.html", "_self");
        }
    </script>
</body>

效果如下所示：
在这里插入图片描述
如上所示，

第一种情况，name是一个窗口的名字，因为这个窗口还没有打开，所以会打开一个新的窗口，并载入url文档。
第二种情况，name是一个窗口的名字，因为这个窗口已打开，所以新的文档会替换掉原来的文档。
第三种情况，name值为_blank，会直接打开一个新的窗口
第四种情况，name值为_self，会用url里面的文档替换掉当前窗口的文档，不会打开新的窗口。

（2）关闭窗口

上面的window.open()会有一个返回值result，result.close()用来关闭打开的窗口。比如下面的例子：

<body>
    <p onclick="openNewWindow()">打开新窗口</p>
    <p onclick="closeNewWindow()">关闭新窗口</p>
    <script>
        var w;
        function openNewWindow() {
            w = window.open("Demo1.html", "windowName");
        }
        function closeNewWindow() {
            w.close();
        }
    </script>
</body>

效果如下：
在这里插入图片描述

代码文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p onclick="openNewWindow()">open new window</p>
    <script>
        var myWindow;
        function openNewWindow() {
		//请在此处编写代码
		/********** Begin **********/
        var myWindow = window.open("Demo.html", "window_name");
        
        
		/********** End **********/
        }
    </script>
</body>
</html>

【这周的练习又结束了呢？小白终于要做另一个平台的题了，累die~，明天还要补课，/(ㄒoㄒ)/，QAQ，这个世界上又多了个伤心人！】

句子君：

“自己”这个东西是看不见的，撞上一些别的什么，反弹回来，才会了解“自己”。所以跟很强的东西、可怕的东西、水准很高的东西相碰撞，然后才知道自己是什么，这才是自我。——山本耀司