【方法】HTML网页调用本地Python程序

亦凉 2022-05-25 03:05 285阅读 0赞

# **代码已上传[github][]** #

--------------------

**首先声明，在HTML中调用本地Python程序是十分不推荐的，一是因为网页调用本地程序的权限正在被取消，二是因为真不如JS写直接，三是只能在自己本地调用。**

但如果你要用，像我一样，需要在课堂上进行一个Python代码的展示，并且想要一个好看的UI界面的话，可以这样来做，做起来还是很容易的，但这样的展示仅限于需要弹框的，比如我的人脸检测是弹窗式，如果需要内嵌在网页内部的话是不行的。

我所使用的环境是 windows+python3

# 一、编写你的python代码 #

我们就先写一个简单的吧（这个能让你很容易地看到效果），命名为**test2.py**，写入代码：

import os
     
    file = open('new_file' + '.txt','w')
    file.close()

注意：这一步在测试1中不用

# 二、编写你的HTML代码 #

完整代码在后面，这里是方法介绍。其中的重点部分在于java脚本中写的一个函数（function exec1），你不用改，后面调用了这个函数。你只需要修改你需要执行的文件名，下面就是调用的方法：

exec1('python hello.py')
    # 括号内的意义是 用 python 来执行 hello.py 这个文件，！注意python是已经添加到环境变量了的。
    # 执行python程序一般有两个exe方法，一个是直接的python，另一种是pythonw，两者的区别是：用python执行会先打开一个命令行的黑窗，而pythonw不会弹出黑窗（比如你要执行一个输出的程序，就没法显示出来了）
    
    # or use this 
    
    exec1('cmd')
    # 括号内的意义是 直接执行 cmd 这个可执行文件。同理你把python文件打包成exe文件也是可以直接采用这种方法的。

测试1完整代码在这里，新建一个html文件，命名**test1.html**：

<!DOCTYPE html>  
    <html>  
      <head>  
        <meta charset="utf-8">  
    	<script language="javascript">     
    	function exec1(command) 
    	{     
    	  var ws = new ActiveXObject("WScript.Shell");      
    	  ws.run(command);
    	}     
    	</script>   
      </head>  
      
    <body>
    	<div id="header">
    	<h1>打开python命令行</h1>
    	</div>
    
    	<div id="nav1">
    		打开python命令行（方式1）
            <button onclick="exec1('python')">运行 python</button>
    	</div>
        
    	<div id="nav2">
    		打开python命令行（方式2）
            <input type="button" value="运行 python" onclick="exec1('python')" />
    	</div>
    
    </body> 
    </html>

测试2完整代码在这里， 命名test2.html：

<!DOCTYPE html>  
    <html>  
      <head>  
        <meta charset="utf-8">  
    	<script language="javascript">     
    	function exec1(command) 
    	{     
    	  var ws = new ActiveXObject("WScript.Shell");      
    	  ws.run(command);
    	}     
    	</script>   
      </head>  
      
    <body>
    	<div id="header">
    	<h1>运行python</h1>
    	</div>
    
    	<div id="nav1">
    		执行test2程序（方式1）
            <button onclick="exec1('python test2.py')">运行 python</button>
    	</div>
        
    	<div id="nav2">
    		执行test2程序（方式2）
            <input type="button" value="运行 python" onclick="exec1('python test2.py')" />
    	</div>
    
    </body> 
    </html>

# 三、测试 #

### 1、首先测试ActiveX使用正常！只需要HTML文件，不需要python文件，存放位置也随意。 ###

### **      chrome浏览器看步骤①~⑤（5步）；ie浏览器看步骤⑥~⑨（4步）** ###

①在chrome拓展程序中安装一个名为IE TAB的拓展程序

②用chrome浏览器打开**test1.html**文件

③点击右上角IE Tab![70][]启动IE内核，启动IE TAB后会弹出这个警告，你需要点击同意

![70 1][]

** **④点击网页界面中的运行代码的button，还会弹出一个警告，你也需要点“是”

![70 2][]

⑤最后弹出下面这样的python的命令行黑框就验证成功了！

![20181221164049435.png][]

⑥用ie浏览器打开**test1.html**文件

⑦页面下方弹出警告，点击允许

![20181221164907371.png][]

⑧ 点击“运行python”的按钮，又会弹出一个警告，点击“是”

![2018122116505287.png][]

⑨最后弹出下面这样的python的命令行黑框就验证成功了！

![20181221165151717.png][]

### 2、完整测试 ###

①将第一步中的**test2.py**文件和第二步中的**test2.html**文件准备好

②**使用chrome**，在启动IE Tab后，会在本地产生一个文件夹，我的是在C:\\Users\\Jerry\\AppData\\Local\\IE Tab\\11.4.23.1,找到类似这样一个目录，把①准备好的python和html文件复制进去

**      ③使用ie**，把①准备好的python和html文件放在桌面上

④重复前面类似操作

如果在对应的的地址下新建了一个new\_file.txt的文件就说明验证成功了。

--------------------

**！！！注意如果遇到弹出黑框一闪就消失了，说明几点问题，请注意排查：**

1、比如我写的最简单的输出hello world程序，也是一闪就消失了，但我截了一张图，这就说明代码运行了，然后自动关闭了。但这并不是个问题，大多数人也不是要看这个黑框的，只要这个py执行了就好。如果你想要看到print类型的结果，那么你可以修改exec1('python -i test2.py')，-i会让进程不被杀掉。类似的，你也可以用pythonw，就不会弹出黑框。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70][]

2、在使用此教程执行你的Python程序前，请先单独运行看是否正常，如果程序有问题，效果就是黑框一闪就消失了。

3、注意博客写的路径问题，使用chrome浏览器的根目录在C盘 IE TAB那个文件夹下，使用ie浏览器的根目录在桌面，注意文件放对位置。

4、这是一条Tips，如果你想在不想放在桌面，想在其他文件夹下运行，只需将代码中的路径改为绝对地址即可，用/。

5、如果弹不出警告，现在我提供两种按钮的方式，都尝试一下（有些人第一种成功，有些人第二种成功，需要关了重开试另一种）。再就是检查ActiveX服务的设置，通常检查IE设置，再重试就好了（一般设置都没问题）。在评论有人发现了除设置之外问题的解决，放在这里可以尝试一下

![20190924093414392.png][]

--------------------

# 四、后话 #

很多人想利用此教程完成一些Python+html的工作，我也研究了一段时间，下面分享一下，欢迎大家交流。但是会JS真的更好！

### 1、拓展一 ###

上面的简单测试都是网页与程序分离的，那如果想要网页HTML与本地Python交互起来呢？但因为该方法的局限性，我们只能先将网页输入的内容以txt的形式存到本地，然后本地Python读取该txt再执行预设程序，然后把结果再存到本地txt中，最后网页读取该txt文本显示在网页上。

实现效果1：点击【运行python】按钮，后台执行python，点击【结果】，页面下方显示python的运行结果，如下图所示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70 2][]

方法：原理是python将执行结果写入一个txt文件中，html再读取txt，将结果显示出来

python代码，命名test3.py

# 示例代码：生成一个随机数并写入（每次重写）txt
    
    import random
     
    number = random.randint(1,10)
    
    f = open('number.txt','w')
    f.write(str(number))
    f.close()

html代码，命名test3.html

<!DOCTYPE html>
    
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function exec1(command) {
                var ws = new ActiveXObject("WScript.Shell");
                ws.run(command);
            }
        </script>
    </head>
    
    <body>
        <div id="header">
            <h1>读取python运行的结果</h1>
        </div>
    
        
    	
    	<div id="program1">
    		执行test3程序（方式1）
            <button onclick="exec1('python test3.py')">运行 python</button>
    	</div>
        
    	<div id="program2">
    		执行test3程序（方式2）
            <input type="button" value="运行 python" onclick="exec1('python test3.py')" />
    	</div>
    
        
        
        <div id="result">
            <p><a href="number.txt" target="result">结果</a></p>
            <iframe name="result" width="100" height="30" scrolling="no" frameborder="3"></iframe>
        </div>
    
    </body>
    
    </html>

使用方法同上即可。

实现效果2：输入点击显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70 3][]

python代码，命名test4.py

# 读取生成的input.txt内容
    f1 = open('input.txt') # 读取的数据类型为str
    number1 = int(f1.read())
    
    # 执行你要执行的程序（例子为计算平方）
    number2 = number1 * number1
    
    # 把运行的结果写入result.txt中
    f2 = open('result.txt', 'w')
    f2.write((str(number2)))
    
    f1.close()
    f2.close()

html代码，命名test4.html

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function exec1(command) {
                var ws = new ActiveXObject("WScript.Shell");
                ws.run(command);
            }
    
            function input() {
                text = document.getElementById("data").value;  //获得网页文本框的值
                var strFile = "input.txt";	//定义文件保存的路径
                var objFSO = new ActiveXObject("Scripting.FileSystemObject");
                var objStream = objFSO.CreateTextFile(strFile, true);
                objStream.Write(text);  //写值
                objStream.Close();
            }
        </script>
    </head>
    
    <body>
        <div id="header">
            <h1>对输入值进行平方计算</h1>
        </div>
    
        
        <div id="input">
            <input id="data" type="text" value="22" />
            <p></p>
            <input type="button" value="输入完毕" onclick="input()" />
        </div>
        <p></p>
    	
        
    	<div id="program1">
    		执行test3程序（方式1）
            <button onclick="exec1('python test4.py')">运行 python</button>
    	</div>
        
    	<div id="program2">
    		执行test3程序（方式2）
            <input type="button" value="运行 python" onclick="exec1('python test4.py')" />
    	</div>
    
        
        <div id="result">	
            <p><a href="result.txt" target="result">显示结果</a></p>
            <iframe name="result" width="100" height="30" scrolling="no" frameborder="3"></iframe>	
        </div>
    
        <p></p>
        <div id="result">
            使用说明：文本框输入一个数字，然后依次点击 [输入完毕] [运行python] [显示结果]
        </div>
    </body>
    
    </html>

### 2、拓展二 ###

实现效果：人脸检测，人脸识别等网页交互界面

因为这个项目就是我在完成这样一个课程作业时的突发奇想，下面就是完整界面和程序。

![70 3][]

完整代码下载：

[https://github.com/yzy1996/Face-Detection][https_github.com_yzy1996_Face-Detection]

用法是：

拖到上面提到的IE TAB目录下，执行html文件，同上步骤，即可。

--------------------

有问题欢迎留言，好想给大家做一个录屏，后面再说吧，可以联系我手把手教你。

关于我：[https://blog.csdn.net/yzy\_1996/article/details/84312085][https_blog.csdn.net_yzy_1996_article_details_84312085]

为了更快地帮助你，请按照如下格式描述你的问题：

你所使用的浏览器（Chrome/IE）+ 测试1/2是否都通过 + 你的问题

[github]: https://github.com/yzy1996/Python-Code/tree/master/Python%2BHTML
[70]: /images/20220525/8822b0f14a7c47768994b8cf1530128e.png
[70 1]: /images/20220525/b4f118c1857a431da0c5a1b6c943cf12.png
[70 2]: /images/20220525/29c617c284ea4f85a61883b792709c8b.png
[20181221164049435.png]: /images/20220525/48f98784605c48979be2729198aa6a2d.png
[20181221164907371.png]: /images/20220525/50797d24d08a406593ddf590cc957dc3.png
[2018122116505287.png]: /images/20220525/3742310746984e03b005a5a6ecf915b8.png
[20181221165151717.png]: /images/20220525/d6c060b915154cff863b428bd06186e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70]: /images/20220525/487b9844929b42fea59f5f34cccec10a.png
[20190924093414392.png]: /images/20220525/a2090fb1d330403a867fa6499cd97a75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181129172615116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70 2]: /images/20220525/5f1af1f0d6cd4d95bfebd30a630f3843.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV8xOTk2_size_16_color_FFFFFF_t_70 3]: /images/20220525/86dde2bb3df84f4e9384e0b2288b57b4.png
[70 3]: /images/20220525/42f7f62da9714fd7b76b17d00b81a310.png
[https_github.com_yzy1996_Face-Detection]: https://github.com/yzy1996/Face-Detection
[https_blog.csdn.net_yzy_1996_article_details_84312085]: https://blog.csdn.net/yzy_1996/article/details/84312085