在这篇教程中，我们会用 Python 的 PyQt 框架编写一个简单的 web 浏览器。关于 PyQt ，你可能已经有所耳闻了，它是 Qt 框架下的一系列 Python 组件，而 Qt（发音类似“cute”）是用来开发 GUI 的 C++ 框架。严格来讲， Qt 也可用于开发不带图形界面的程序，但是开发用户界面应该是 Qt 框架最为广泛的应用了。Qt 的主要优势是可以开发跨平台的图形界面程序，基于 Qt 的应用能够借助于各平台的原生性在不同类的设备上运行，而无须修改任何代码库。
Qt 附带了 webkit 的接口，你可以直接使用 PyQt 来开发一个基于 webkit 的浏览器。
我们本次教程所开发的浏览器可以完成如下功能：
- 加载用户输入的url
- 显示在渲染页面过程中发起的所有请求
- 允许用户在页面中执行自定义的 JavaScript 脚本
牛刀小试
让我们从最简单的 PyQt 的 Webkit 用例开始吧：输入 url，打开窗口并在窗口中加载页面。
这个例子十分短小，连 import 语句和空行在内也只有 13 行代码。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import sys from PyQt4.QtWebKit import QWebView from PyQt4.QtGui import QApplication from PyQt4.QtCore import QUrl app = QApplication(sys.argv) browser = QWebView() browser.load(QUrl(sys.argv[1])) browser.show() app.exec_() |
当你通过命令行将 url 传给脚本时，程序会加载 url 并且在窗口中显示加载完成的页面。
现在，看似你已经有一个“命令行浏览器”啦！至少比 python 的 requests 模块强多了，甚至比 Lynx 还略高一筹，因为我们的浏览器还可以加载 JavaScript 脚本呢。但是目前为止还没有跟 Lynx 拉开差距，因为在启用浏览器的时候只能通过命令行传入 url。那么，必然需要通过某种方式把需要加载的 url 传入浏览器。没错，就是地址栏！
添加地址栏
其实地址栏的实现非常简单，我们只需要在窗口顶端加一个输入框就够了。用户在文本框中输入 url 之后，浏览器就会加载这个地址。下面，我们将用到 QLineEdit 控件来实现输入框。鉴于我们的浏览器现在有地址栏和浏览器显示框两部分，因此还要给我们的应用增加一个网格布局。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import sys from PyQt4.QtGui import QApplication from PyQt4.QtCore import QUrl from PyQt4.QtWebKit import QWebView from PyQt4.QtGui import QGridLayout, QLineEdit, QWidget class UrlInput(QLineEdit): def __init__(self, browser): super(UrlInput, self).__init__() self.browser = browser # add event listener on "enter" pressed self.returnPressed.connect(self._return_pressed) def _return_pressed(self): url = QUrl(self.text()) # load url into browser frame browser.load(url) if __name__ == "__main__": app = QApplication(sys.argv) # create grid layout grid = QGridLayout() browser = QWebView() url_input = UrlInput(browser) # url_input at row 1 column 0 of our grid grid.addWidget(url_input, 1, 0) # browser frame at row 2 column 0 of our grid grid.addWidget(browser, 2, 0) # main app window main_frame = QWidget() main_frame.setLayout(grid) main_frame.show() # close app when user closes window sys.exit(app.exec_()) |
到这里，我们已经有一个浏览器的雏形啦！看上去和当年的 Google Chrome 还有几分相像呢，毕竟两者采用了相同的渲染引擎。现在，你可以在输入框中输入 url ，程序便会将地址传入浏览器，接着渲染出所有的 HTML 页面和 JavaScript 脚本并展示出来。
添加开发工具
一个浏览器最有趣也最重要的部分是什么？当然是各种各样的开发工具了！一个没有开发者控制台的浏览器怎么能算是浏览器呢？所以，我们的 Python 浏览器当然也要有一些开发者工具才行。
现在，我们就来添加一些类似于 Chrome 的开发者工具中 “Network” 标签的功能吧！这个功能就是简单地追踪浏览器引擎在加载页面的时候所执行的所有请求。在浏览器主页面的下方，我们将通过一个表来显示这些请求。简单起见，我们只会记录登录的 url、返回的状态码和响应的内容类型。
首先我们要通过 QTableWidget 组件创建一个表格，表头包括需要存储的字段名称，表格可以根据每次新插入的记录来自动调整大小。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
class RequestsTable(QTableWidget)e" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"> class RequestsTable(QTableWidget)="font-weight: normal">在这篇教程中，我们会用 Python 的 PyQt 框架编写一个简单的 web 浏览器。关于 PyQt ，你可能已经有所耳闻了，它是 Qt 框架下的一系列 Python 组件，而 Qt（发音类似“cute”）是用来开发 GUI 的 C++ 框架。严格来讲， Qt 也可用于开发不带图形界面的程序，但是开发用户界面应该是 Qt 框架最为广泛的应用了。Qt 的主要优势是可以开发跨平台的图形界面程序，基于 Qt 的应用能够借助于各平台的原生性在不同类的设备上运行，而无须修改任何代码库。
Qt 附带了 webkit 的接口，你可以直接使用 PyQt 来开发一个基于 webkit 的浏览器。 我们本次教程所开发的浏览器可以完成如下功能：
牛刀小试让我们从最简单的 PyQt 的 Webkit 用例开始吧：输入 url，打开窗口并在窗口中加载页面。 这个例子十分短小，连
当你通过命令行将 url 传给脚本时，程序会加载 url 并且在窗口中显示加载完成的页面。 现在，看似你已经有一个“命令行浏览器”啦！至少比 python 的 requests 模块强多了，甚至比 Lynx 还略高一筹，因为我们的浏览器还可以加载 JavaScript 脚本呢。但是目前为止还没有跟 Lynx 拉开差距，因为在启用浏览器的时候只能通过命令行传入 url。那么，必然需要通过某种方式把需要加载的 url 传入浏览器。没错，就是地址栏！ 添加地址栏其实地址栏的实现非常简单，我们只需要在窗口顶端加一个输入框就够了。用户在文本框中输入 url 之后，浏览器就会加载这个地址。下面，我们将用到 QLineEdit 控件来实现输入框。鉴于我们的浏览器现在有地址栏和浏览器显示框两部分，因此还要给我们的应用增加一个网格布局。
到这里，我们已经有一个浏览器的雏形啦！看上去和当年的 Google Chrome 还有几分相像呢，毕竟两者采用了相同的渲染引擎。现在，你可以在输入框中输入 url ，程序便会将地址传入浏览器，接着渲染出所有的 HTML 页面和 JavaScript 脚本并展示出来。 添加开发工具一个浏览器最有趣也最重要的部分是什么？当然是各种各样的开发工具了！一个没有开发者控制台的浏览器怎么能算是浏览器呢？所以，我们的 Python 浏览器当然也要有一些开发者工具才行。 现在，我们就来添加一些类似于 Chrome 的开发者工具中 “Network” 标签的功能吧！这个功能就是简单地追踪浏览器引擎在加载页面的时候所执行的所有请求。在浏览器主页面的下方，我们将通过一个表来显示这些请求。简单起见，我们只会记录登录的 url、返回的状态码和响应的内容类型。 首先我们要通过 QTableWidget 组件创建一个表格，表头包括需要存储的字段名称，表格可以根据每次新插入的记录来自动调整大小。
|
