[Python][Eel] Page transition and Create new window

Page transition


Page transition is completed only with JavaScript.

The relevant part is link function.

Specify the HTML file name included extension for the target arg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Link Page Sample</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="/eel.js"></script>
</head>
<body>
    <button onclick="link('test1.html')">Link Button</button>
</body>
<script>
function link(target) {
    window.location.href=target;
}
</script>
</html>

Create new window


Creating new window requires python code.

First, describe the python code.

The relevant part is new_window function.

Specify the HTML file name included extension for the target arg.

import eel

eel.init("web")

@eel.expose
def new_window(target: str):
    eel.show(f"html/{target}")


eel.start("html/new_window.html", port=9000)

Second, describe the HTML/JavaScript code.

Display a new window by calling python code “eel.new_window” from JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="/eel.js"></script>
</head>
<body>
    <button onclick="newWindow('test2.html')">New Window Button</button>
</body>
<script>
function newWindow(target) {
    eel.new_window(target);
}
</script>
</html>

Leave a Reply

Your email address will not be published.