如何在Python Tkinter窗口中正确嵌入HTML页面？显示异常求助

尝试用tkhtmlview将HTML项目嵌入Tkinter窗口，但显示效果和浏览器不符。以下是原代码：

原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()

原OpenMe.html代码 #

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

核心问题 #

tkhtmlview基于Tkinter文本组件开发，仅支持有限的HTML/CSS/JS特性，无法兼容现代浏览器的全部功能：

• 不支持CSS transition动画、:hover伪类
• 无法加载远程字体（如Google Fonts）
• JS支持受限，仅能处理基础DOM操作
• 原HTML存在语法错误，进一步加剧渲染异常

修复步骤 #

1. 修正HTML语法错误

• 导航按钮的onclick="hme()"改为onclick="hm()"（原函数名为hm）
• 闭合未结束的<font>标签
• 移除不存在的CConsole元素相关JS代码（避免控制台报错）
• 用CSS替代<body bgcolor>属性

2. 适配tkhtmlview的样式限制

• 删除transition和:hover样式（无法生效）
• 改用静态样式定义按钮外观
• 替换远程字体为系统默认字体

3. 优化Python代码

• 直接读取HTML文件内容传入HTMLText，替代RenderHTML（稳定性更高）

修改后的代码 #

修正后的app.py #

import tkinter as tk
from tkhtmlview import HTMLText

root = tk.Tk()
root.title("HTML GIZMO!")
root.geometry("1200x600")

# 直接读取HTML文件内容
with open("OpenMe.html", "r", encoding="utf-8") as f:
    html_content = f.read()

html_label = HTMLText(root, html=html_content)
html_label.pack(fill="both", expand=True)
html_label.fit_height()

root.mainloop()

修正后的OpenMe.html #

<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>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #050505;
            font-family: sans-serif;
            color: white;
            text-align: center;
        }

        .navi {
            height:50px;
            width:100px;
            color: white;
            border-color: white;
            border-radius: 15px;
            background-color: transparent;
            border-width: 2px;
            margin: 0 5px;
        }

        .navi.active {
            background-color:white;
            color:black;
        }

        .title { 
            font-size: 80px; 
            margin: 20px 0;
        }

        .title span {
            display: inline-block;
        }

        .update-list {
            text-align: left;
            display: inline-block;
            margin: 20px 0;
        }

        .version {
            color: grey;
            font-size: 16px;
        }
    </style>
    <script>
        function hm(){
            location.href="./OpenMe.html"
        }
        function game(){
            location.href="./games/games.html"
        }
        function tools(){
            location.href="./tools/tools.html"  
        }
        function cre(){
            location.href="./info/credits.html" 
        }
    </script>
</head>
<body>
    <nav>
        <br>
        <button class="navi active" onclick="hm();">Home</button>
        <button class="navi" onclick="game();">Games</button>
        <button class="navi" onclick="tools();">Tools</button>
        <button class="navi" onclick="cre();"> Updates </button>
    </nav>
    
    <p class="title">
        <span style="color:lime">H</span>
        <span style="color:blue">T</span>
        <span style="color:purple">M</span>
        <span style="color:red">L</span>
        <span style="color:orange"> G</span>
        <span style="color:orange">I</span>
        <span style="color:lime">Z</span>
        <span style="color:red">M</span>
        <span style="color:orange">O</span>
        <span style="color:yellow">!</span>
    </p>
    
    <h1>What's New:</h1>
    <div class="update-list">
        - Made UI Changes<br>
        - Added a New Game<br>
        - Fixed Bugs
    </div>
    
    <div class="version">Version 0.1.10.00.000</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者EnQuire