无法使用 QWebEnginePage::runJavaScript() 更改 backgroundImage

Question

我本来想解决 this problem 的问题，但是当我测试了 QWebEnginePage::runJavaScript() 的行为后，我发现我什至无法通过以下代码使用 QWebEnginePage::runJavaScript() 更改 backgroundImage，那为什么呢？

import sys

from PyQt5.QtGui import *
from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *
from PyQt5.QtWebEngineCore import *


class WebEngineView(QWebEngineView):
    def __init__(self, parent=None):
        super().__init__(parent)

        self.webPage = self.page()
        # self.webPage = WebEnginePage()
        self.webPage.load(QUrl('https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style'))
        self.webPage.runJavaScript('''
                                window.addEventListener("load", function(event) {
                                        alert(document.title);
                                        document.body.style.backgroundImage = "url('https://www.w3schools.com/jsref/img_tree.png')";

                                });
                     ''')  # QWebEngineScript.MainWorld


if __name__ == "__main__":

    app = QApplication(sys.argv)
    app.setAttribute(Qt.AA_UseSoftwareOpenGL)
    webEngineView = WebEngineView()
    webEngineView.show()
    sys.exit(app.exec_())

Answer 1

您要修改 DOM，因此必须已经创建了它，在您的情况下，您在加载页面之前使用 runJavaScript 并且未构建 DOM。考虑到有两种可能的解决方案：

• 加载页面后使用loadFinished信号执行脚本：

import sys
from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets


class WebEngineView(QtWebEngineWidgets.QWebEngineView):
    def __init__(self, parent=None):
        super().__init__(parent)
        self.loadFinished.connect(self.on_load_finished)

        self.load(
            QtCore.QUrl(
                "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style"
            )
        )

    @QtCore.pyqtSlot(bool)
    def on_load_finished(self, ok):
        if ok:
            script = """
            alert(document.title);
            document.body.style.backgroundImage = "url('https://www.w3schools.com/jsref/img_tree.png')";
            """
            self.page().runJavaScript(script)


if __name__ == "__main__":
    QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_ShareOpenGLContexts)
    QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_UseSoftwareOpenGL)
    app = QtWidgets.QApplication(sys.argv)
    w = WebEngineView()
    w.show()
    sys.exit(app.exec_())

• 使用QWebEngineScript 实现user script，允许您注入javascript 代码：

import sys

from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets


class WebEngineView(QtWebEngineWidgets.QWebEngineView):
    def __init__(self, parent=None):
        super().__init__(parent)

        script = QtWebEngineWidgets.QWebEngineScript()
        name = "test"
        source = """
        alert(document.title);
        document.body.style.backgroundImage = "url('https://www.w3schools.com/jsref/img_tree.png')";
        """
        script.setName(name)
        script.setSourceCode(source)
        script.setInjectionPoint(
            QtWebEngineWidgets.QWebEngineScript.DocumentReady
        )
        script.setRunsOnSubFrames(True)
        script.setWorldId(QtWebEngineWidgets.QWebEngineScript.ApplicationWorld)
        self.page().scripts().insert(script)

        self.load(
            QtCore.QUrl(
                "https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style"
            )
        )


if __name__ == "__main__":
    QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_ShareOpenGLContexts)
    QtCore.QCoreApplication.setAttribute(QtCore.Qt.AA_UseSoftwareOpenGL)
    app = QtWidgets.QApplication(sys.argv)
    w = WebEngineView()
    w.show()
    sys.exit(app.exec_())