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

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

简介

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

功能概述

1.用户可以在输入框中输入查询词，并通过点击“搜索”按钮打开一个新的搜索页面。

2.可以通过点击“关闭页面”按钮关闭新打开的搜索页面。

3.还可以通过点击“关闭当前页面”按钮关闭当前浏览器标签页。

HTML部分

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

	关闭当前页面
    

    搜索关闭页面

运行结果

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后点击搜索

会创建一个新的页面跳转到百度的页面中

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

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

完整代码

    
    Title


    关闭当前页面
   搜索关闭页面
    
    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代表的就是当前页面窗口对象
    }