How to implement a html file into a python tkinter window?

Question

so i wanted to implement my html webpage project into a python tkinter window, using tkinter html view.

but when i attempted to do exactly that, i get this (python tkinter window) what im geting

but this is how i originally made it to look like (in browser, the colors are messed up because of my client side settings) supposed to look like

so here is my python code in "app.py":

import tkinter as tk
from tkhtmlview import HTMLText, RenderHTML

root = tk.Tk()
root.title("Youtube")
root.geometry("1200x600")
html_label = HTMLText(root, html=RenderHTML('OpenMe.html'))
html_label.pack(fill="both", expand=True)
html_label.fit_height()
root.mainloop()

and here is my html "OpenMe.html" code:


<html lang="en">
  <head>
      
      <!--
            page version number 16.10
        -->
      
    <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>HTML GIZMO!</title>
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
      <style>
        
          
          .buttn {
            transition: 0.2s;
            height: 100px;
            width: 200px;
            color: white;
            border-color: black;
            border-radius: 15px;
            background-color: transparent;
            border-width: 3px;
            click: pointer;
        }
        
        button {
            transition: 0.2s;
            height:100px;
            width:200px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
        
        button:hover {
            transition: 0.2s;
            height:150px;
            width:300px;
            color: black;
            border-color: white;
            border-radius: 15px;
            background-color: white;
            border-width: 2px;
        }
        
        .buttn:hover {
            transition: 0.2s;
            height:150px;
            width:250px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
          
          
          
        body {
          margin: 0;
          padding: 0;
          font-family: 'Roboto', sans-serif;
        }
          
          hr {
        width: 15%;
        margin-left: auto;
        margin-right: auto;
      }
          
         .title { font-size: 80px; }

                .navi {
            transition: 0.2s;
            height:50px;
            width:100px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
        }
        
        .navi:hover {
            transition: 0.2s;
            height:75px;
            width:150px;
            color: black;
            border-color: white;
            border-radius: 15px;
            background-color: white;
            border-width: 2px;
        }
          
          </style>
    <script>

        function hm(){
            location.href="./OpenMe.html"
        }
        function game(){
            location.href="./games/games.html"
        }
        function tools(){
            location.href="./tools/tools.html"  
        }
        function sett(){
            location.href="./settings.html" 
        }
        function cre(){
            location.href="./info/credits.html" 
        }
        
function Startup(){
    //Time//
    const date = new Date();
    const hour = date.getHours();
    const mins = date.getMinutes();
    document.getElementById("CConsole").innerHTML = hour+":"+mins;  
}
        
    </script>
  </head>
   <body bgcolor="#050505" onload="Startup();">
       <center><nav><font color = "white">
           <br>
            <button class="navi" style="background-color:white;color:black;" onclick="hme();">Home</button>   <button class="navi" onclick="game();">Games</button> <button class="navi" onclick="tools();">Tools</button> <button class="navi" onclick="cre();"> Updates </button>
           
       </nav></center>
      <center><p class="title"><font color="lime"> H<font color="blue">T<font color="purple">M<font color="red">L<font color="orange"> G<font color="orange">I<font color="lime">Z<font color="red">M<font color="orange">O<font color="yellow">!<font color="white"></p>
          <h1>What's New:</h1>
          -Made UI Changes<br>
          -Added a New Game<br>
          -Fixed Bugs
          <font color="grey"><h4><center>Version 0.1.10.00.000</center></h4></center>
  </body>
</html>

can someone with this pleasae? i am pretty new to python and especially tkinter it would really help alot!

tkhtmlview does not support <style>. Use tkinterweb.HtmlFrame. Note that JavaScript is not supported. — acw1668
– acw1668, Commented Jan 29, 2024 at 4:53

Temidayo · Accepted Answer · 2024-07-20 10:21:17Z

tkhtmlview library in Tkinter doesn't support HTML CSS javascript like web browsers. I suggest you embed a browser component in your Tkinter app using

cefpython3 library which renders javascript too.

def __init__(self, root):
    self.root = root
    self.root.geometry("1200x600")
    self.root.title("Youtube")

    # Frame for embedding the CEF browser
    self.browser_frame = tk.Frame(self.root, width=1200, height=600)
    self.browser_frame.pack(fill="both", expand=True)

    # Initialize CEF and create the browser
    self.initialize_cef()



 def initialize_cef(self):
        sys.excepthook = cef.ExceptHook  # To shutdown all CEF processes on error
        cef.Initialize()
        self.browser = cef.CreateBrowserSync(url=os.path.abspath("OpenMe.html"),
                                             window_title="My HTML",
                                             window_handle=self.browser_frame.winfo_id())

        # Set up message loop to handle CEF events
        self.root.after(10, self.message_loop)

    def message_loop(self):
        cef.MessageLoopWork()
        self.root.after(10, self.message_loop)

    def on_closing(self):
        self.root.destroy()
        cef.Shutdown()

if __name__ == "__main__":
    root = tk.Tk()
    app = MyBrowser(root)
    root.protocol("WM_DELETE_WINDOW", app.on_closing)
    root.mainloop()

Collectives™ on Stack Overflow

How to implement a html file into a python tkinter window?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related