一、弹出窗口

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为3-1.JavaScript操作Window-弹出窗口.html

<!DOCTYPE html>
<html>
    <head>
        <!-- 1.直接在script元素内写js -->
        <script>
            // 弹窗
            window.alert("弹出信息")
        </script>
    </head>
</html>

2、双击【3-1.JavaScript操作Window-弹出窗口.html】

image-20250520081442271

二、弹出确认信息

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为3-2.JavaScript操作Window-弹出确认信息.html

<!DOCTYPE html>
<html>
    <head>
        <!-- 直接在script元素内写js -->
        <script src="demo.js"></script>
        <script>
            // 弹出来一个确认框
            window.confirm()
        </script>
    </head>
</html>

2、双击【3-2.JavaScript操作Window-弹出确认信息.html】,回显内容如下：

  • 第一次提示"弹出信息从单独的文件"
  • 第二次提示点击【确定】或【取消】

三、打开新窗口

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为3-3.JavaScript操作Window-打开新窗口.html

<!DOCTYPE html>
<html>
    <script>
        // 在新窗口打开一个网址
        // window.open("https://www.baidu.com")
        // 在当前窗口打开一个网址
        window.location.href = "https://www.baidu.com"
    </script>
</html>

2、双击【3-3.JavaScript操作Window-打开新窗口.html】,打开后直接跳转到百度页面

四、关闭窗口

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为3-4.JavaScript操作Window-关闭窗口.html

<!DOCTYPE html>
<html>
    <script>
        // 在新窗口打开一个网址
        // window.open("https://www.baidu.com")
        // 在当前窗口打开一个网址
        window.location.href = "https://www.baidu.com"
        // 关闭窗口
        window.close()
    </script>
</html>

2、双击【3-4.JavaScript操作Window-关闭窗口.html】,发现打开后立马关闭

五、获取窗口大小

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为3-5.JavaScript操作Window-获取窗口大小.html

<!DOCTYPE html>
<html>
    <script>
        // 在新窗口打开一个网址
        // window.open("https://www.baidu.com")
        // 在当前窗口打开一个网址
        // window.location.href = "https://www.baidu.com"
        // 关闭窗口
        // window.close()
        // 获取网页窗口的大小
        console.log(window.innerWidth)
        console.log(window.innerHeight)
    </script>
</html>

2、双击【3-5.JavaScript操作Window-获取窗口大小.html】后按F12，点击【控制台】可以展示窗口大小

image-20250520080657582

六、刷新页面

1、创建一个名为css-study的文件夹并使用VSCode打开，再创建一个名为3-6.JavaScript操作Window-刷新页面.html

<!DOCTYPE html>
<html>
    <script>
        // 在新窗口打开一个网址
        // window.open("https://www.baidu.com")
        // 在当前窗口打开一个网址
        // window.location.href = "https://www.baidu.com"
        // 关闭窗口
        // window.close()
        // 获取网页窗口的大小
        console.log(window.innerWidth)
        console.log(window.innerHeight)

        // 刷新页面
        // window.location.reload()
        // 定义一个刷新页面的函数
        function refresh() {
            window.location.reload()
        }
        // 每隔2s刷新一次
        setTimeout(refresh,2000)
    </script>
</html>

2、双击【3-6.JavaScript操作Window-刷新页面.html】后按F12，点击【控制台】可以展示窗口大小,观察到每隔2s刷新一次