【前端】利用JavaScript 实现窗口操作：打开、关闭当前页面与新窗口

最新推荐文章于 2025-02-19 08:57:40 发布

虚拟现实旅人

最新推荐文章于 2025-02-19 08:57:40 发布

阅读量695

点赞数 5

文章标签：前端 javascript

本文链接：https://blog.youkuaiyun.com/L10131/article/details/145411009

版权

【前端】利用JavaScript 实现窗口操作：打开、关闭当前页面与新窗口

简介

浏览器窗口的操作在用户交互中非常重要，特别是需要进行页面跳转或者在新窗口中展示内容的时候。本文将基于简单的HTML和JavaScript代码，并以百度搜索内容为例，展示如何使用JavaScript来控制浏览器窗口。

功能概述

1.用户可以在输入框中输入查询词，并通过点击“搜索”按钮打开一个新的搜索页面。
2.可以通过点击“关闭页面”按钮关闭新打开的搜索页面。
3.还可以通过点击“关闭当前页面”按钮关闭当前浏览器标签页。

HTML部分

首先HTML部分中，有一个输入框供用户输入搜索的关键词；“搜索”按钮用来触发搜索功能；“关闭页面”按钮用来关闭打开的百度搜索页面；“关闭当前页面”按钮用来关闭当前浏览器标签页。

	<button class="closecurrent">关闭当前页面</button>
    <br>
    <input type="text" name="baidu"><button class="search">搜索</button><button class="closepage">关闭页面</button>

运行结果
在这里插入图片描述

JavaScript部分

1.搜索功能实现

	var baidu = document.querySelector('input[name="baidu"]')
    var search = document.querySelector('.search')
    var closepage = document.querySelector('.closepage')
    var closecurrent = document.querySelector('.closecurrent')
    var w;

baidu: 获取用户输入的搜索关键词。
search: 获取搜索按钮。
closepage: 获取关闭新窗口的按钮。
closecurrent: 获取关闭当前窗口的按钮。
w: 用于保存通过 open() 打开的新窗口对象。

search.onclick = ()=> {
    console.log(baidu.value);
    w = open(`https://www.baidu.com/s?wd=${baidu.value}`, '_blank');
}

.open(url=URL地址，target=打开方式, windowname=窗口名称)
URL地址，新页面的地址
打开方式，就是a标签的target属性值
_self 在当前页面窗口中打开url地址
_blank 在新建浏览器标签页中打开url地址
_top 在顶级页面窗口中打开url地址
窗口名称，就是新开浏览器窗口，绑定该窗口为指定名称，绑定后续所有的浏览器操作
返回值就是新页面的window对象。

2.关闭新窗口功能实现

closepage.onclick = ()=> {
    w.close();
}

w就是上面open打开的浏览器页面的窗口对象，通过窗口对象就可以关闭指定窗口

3.关闭当前窗口功能实现

closecurrent.onclick = ()=> {
    close(); 
}

close();相当于 window.close()，默认情况下window代表的就是当前页面窗口对象

运行结果
输入python后点击搜索
在这里插入图片描述
会创建一个新的页面跳转到百度的页面中

点击关闭页面后百度搜索页面会被关闭掉

点击关闭当前页面时搜索框页面会被关闭掉

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button class="closecurrent">关闭当前页面</button>
   <input type="text" name="baidu"><button class="search">搜索</button><button class="closepage">关闭页面</button>
    <script>
    var baidu = document.querySelector('input[name="baidu"]')
    var search = document.querySelector('.search')
    var closepage = document.querySelector('.closepage')
    var closecurrent = document.querySelector('.closecurrent')
    var w;
    search.onclick = ()=> {
        console.log(baidu.value);
        w = open(`https://www.baidu.com/s?wd=${baidu.value}`, '_blank')
    }
    closepage.onclick = ()=>{
        // w就是上面open打开的浏览器页面的窗口对象，通过窗口对象就可以关闭指定窗口
        w.close()
    }

    closecurrent.onclick = ()=>{
        close(); // 相当于 window.close()，默认情况下window代表的就是当前页面窗口对象
    }

    </script>
</body>
</html>