PyQt5 QWebView:加载.html文件,加载.js文件

时间:2016-11-16 14:39:27

标签: javascript pyqt pyqt5 qwebview qwebkit

我正在尝试使用$allData展示传单地图(灵感来自here)。我的文件夹的结构如下所示:

QWebView

当我使用webkit_leaflet/ ├── map.html ├── map.js └── map.py map.py中包含的所有内容运行map.html时,代码就会正常运行。

map.js

但是,如果我尝试加载from PyQt5 import QtWidgets, QtWebKitWidgets import sys # Create application app = QtWidgets.QApplication(sys.argv) # Add window win = QtWidgets.QWidget() win.setWindowTitle('QWebView Map Test') # Add layout layout = QtWidgets.QVBoxLayout() win.setLayout(layout) # Create QWebView view = QtWebKitWidgets.QWebView() # include code from map.html and map.js view.setHtml(''' <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <style> body { padding: 0; margin: 0; } html, body, #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script> var map = L.map('map').setView([42.35, -71.08], 13); L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery &copy; <a href="http://mapbox.com">Mapbox</a>', id: 'examples.map-i86nkdio', }).addTo(map); </script> </body> </html> ''') # Add QWebView to the layout layout.addWidget(view) # Show window, run app win.show() app.exec_() map.html没有任何反应。

QtCore.QUrl()

当我从外部.html文件中加载JavaScript文件时,有人可以告诉我如何在PyQt5中显示.html文件的内容吗?

以下是from PyQt5 import QtCore, QtWidgets, QtWebKitWidgets import sys # Create application app = QtWidgets.QApplication(sys.argv) # Add window win = QtWidgets.QWidget() win.setWindowTitle('QWebView Map Test') # Add layout layout = QtWidgets.QVBoxLayout() win.setLayout(layout) # Create QWebView view = QtWebKitWidgets.QWebView() # load .html file view.load(QtCore.QUrl('map.html')) layout.addWidget(view) win.show() app.exec_() 的代码:

map.html

还有<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <style> body { padding: 0; margin: 0; } html, body, #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script src="map.js"></script> </body> </html>

的代码
map.js

1 个答案:

答案 0 :(得分:1)

使用QUrl.fromLocalFile传递html文件。您似乎还需要将绝对路径传递给文件。

import os
view.load(QtCore.QUrl.fromLocalFile(os.path.abspath('map.html')))