Python点击按钮弹出新窗口|极客笔记

Python点击按钮弹出新窗口

在 Web 开发中，常常会遇到需要让用户点击按钮或链接后弹出新窗口的需求。本文将以 Python 为例，详细讲解如何通过 Flask 框架实现点击按钮弹出新窗口的功能。

准备工作

在开始之前，我们需要安装 Flask 框架，如果你还没有安装，可以通过以下命令进行安装：

pip install Flask

创建 Flask 应用

首先，我们需要创建一个 Flask 应用，并编写一个简单的 HTML 页面来展示按钮。新建一个 app.py 文件，输入以下代码：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

接下来，在项目根目录下新建一个名为 templates 的文件夹，并在该文件夹下新建一个名为 index.html 的 HTML 文件，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click Button to Open New Window</title>
</head>
<body>
    <h1>Click the button below to open a new window</h1>
    <button onclick="openNewWindow()">Open New Window</button>
    <script>
        function openNewWindow() {
            window.open('/new_window', 'New Window', 'width=400, height=400');
        }
    </script>
</body>
</html>

在上面的代码中，我们在 HTML 页面中添加了一个按钮，并绑定了 onclick 事件，当用户点击按钮时，会调用 openNewWindow 函数来打开一个新窗口。

创建新窗口路由

在 app.py 文件中添加一个新的路由，用来返回新窗口的 HTML 页面。修改 app.py 文件如下：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/new_window')
def new_window():
    return render_template('new_window.html')

if __name__ == '__main__':
    app.run(debug=True)

然后在 templates 文件夹下新建一个名为 new_window.html 的 HTML 文件，输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Window</title>
</head>
<body>
    <h1>This is a new window!</h1>
</body>
</html>