javascript - 如何捕捉和处理 QWebEnginePage 内容的变化？

Question

在 Qt 的 (现已弃用) QWebPage 类中，有一个信号 contentsChanged() 每当网页的 html 内容被用户编辑页面或以编程方式更改的页面更改时调用。在较新的 QtWebEnginePage 类中似乎没有等效信号。鉴于使网页可从 Qt 应用程序编辑的方法已从 QWebPage::setContentEditable 方法更改为 native html5 javascript contenteditable ，这并不让我感到惊讶。

我的问题:有没有办法“监听”QtWebEnginePage 内容的变化？这是我现在必须以某种方式从 javascript 处理的东西吗？

请注意，我查看了 Qt 提供的移植信息，但没有发现任何让我印象深刻的相关信息......

Answer 1

不幸的是，与 QtWebKit 相比，QtWebEngine 与其他 Qt 工具的集成更差、更差。 QtWebKit 能够开箱即用的很多事情只能通过 QtWebEngine 的 JavaScript 技巧来实现。我能够在自己的项目中解决这个特殊问题，但这并不容易。

首先，我必须通过 QWebChannel 设置 C++ 代码和 JavaScript 代码之间的交互。这个答案太大了，无法涵盖这个主题，但从好的方面来说，关于这个的文档或多或少是好的:参见 Qt WebChannel JavaScript API及其 examples .最后从 C++ 代码你应该能够做类似的事情

webChannel->registerObject(QStringLiteral("myObject"), myObject);

其中 webChannel 是指向 QWebChannel 的指针，myObject 是指向具有公共(public)插槽的 QObject 子类的指针.此操作将允许 JavaScript 代码调用 myObject 的公共(public)插槽，从而实现 JavaScript 和 C++ 之间的连接。

JavaScript 用于跟踪 DOM 变化的“ native ”解决方案是 MutationObserver .它是一个 JavaScript 对象，实例化是为了监听 DOM 的变化。在每个 DOM 突变中，观察者调用在构造时提供给它的回调函数。为了通知 C++ 代码 DOM 的变化，回调应该调用暴露给 JavaScript 的一些对象的插槽。在此插槽内的 C++ 代码中，您可以根据需要对内容更改使用react - 如果 C++ 代码的多个部分可能想要订阅 contentsChanged 信号，为它们提供这样的信号，发出它来自 myObject 的插槽。

这是在 JavaScript 端设置 MutationObserver 的简单示例:

var observer = MutationObserver(function(mutations, observer) {
    myObject.onContentChanged();
});

observer.start = function() {
    this.observe(document, {
        subtree: true,
        attributes: true,
        childList: true,
        characterData: true,
        characterDataOldValue: true
    });
}

observer.stop = function() {
    this.disconnect();
}

虽然这种方法的设置比 QtWebKit 的 contentsChanged 信号要复杂得多，但最终我发现它更灵活，因为有了MutationObserver 您可以看到 DOM 中究竟发生了什么变化并进行一些高级处理:

1. 忽略您不感兴趣的更改。
2. 记住之前的 DOM 状态，以便进一步执行撤消/重做。
3. 当您手动执行的 JavaScript 代码需要更改 DOM 时，暂停监听 DOM 更改 - 有时不将此类更改通知 C++ 代码会很方便，因为 C++ 代码很难区分介于文本编辑引起的变化和某些脚本执行引起的变化之间。
4. 记录确切发生的变化 - 是否添加、删除或更改了某些节点等。