EelはPythonの比較的新しいGUIライブラリで、ドキュメントや検索結果がまだあまりないです。
ページ遷移や新規ウィンドウについてもすぐ出てこなかったのでまとめておこうと思います。
目次
Eelでページ遷移
ページ遷移についてはJS内で完結する。
該当箇所はlink関数。たったこれだけ。targetは拡張子含めたhtmlファイル名を指定する。
<!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>Eelで新しいWindow表示
新しいウィンドウはPython側の処理が必要。
まずはPython側のコード。
targetは拡張子含めたhtmlファイル名を指定。
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)フロント側でPythonコードを呼ぶことで新規ウィンドウを表示できる。
<!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>数少ないEel関連の情報色々まとめているのでよかったら見てみてください！