目次
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>