Web 引擎中的自定义 JavaScript 事件

为了触发在 Web 引擎上运行的网站中的功能，可以使用 JavaScript CustomEvent。

有关 CustomEvent() 的描述，请单击此处。

可以使用 vrdWebEngines 的 sendEvent() 方法发送 CustomEvent。它采用两个字符串参数。第一个是 CustomEvent 的标识符，第二个可以包含特定于事件的数据，也可以是空字符串。

在网页中注入的 JavaScript 代码如下所示：

1  var e = new CustomEvent( event
2      {
3          detail: data        
4      });
5
6  document.dispatchEvent(e);

始终通过 DOM 文档发送事件。您可以在 Web 引擎上所运行的 JavaScript 代码中安装事件处理程序，用于侦听这些事件并触发其他功能。

示例 1

以下是一个小示例，说明如何使用 CustomEvent 更改网页的背景颜色。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>JavaScript Custom Event</title>
 7 </head>
 8 <body style="background-color:white;">
 9     <div class="note">JavaScript Custom Event</div>
10     <script>    
11         document.addEventListener("testEvent", function(event) {   
12             document.body.style.background = event.detail.color;
13         });
14     </script>
15 </body>
16 </html>

这将创建一个具有白色背景的页面，并为名为“testEvent”的自定义事件安装事件侦听器。要在 VRED 中使用此项，请创建一个新的前板，并为其指定名称“EventFrontPlate”。这会将其内容类型设置为“Web”，然后复制并粘贴上述 html 代码。

现在，我们需要一个基础 Web 引擎实例：

we = vrWebEngineService.getWebEngine("EventFrontPlate")

现在，我们创建一个将背景颜色更改为红色的事件：

we.sendEvent("testEvent", "{color: 'red'}")

或者，我们可以将其设置为绿色：

we.sendEvent("testEvent", "{color: 'green'}")

如果不希望将自定义数据传递到事件，则可以对第二个参数使用空字符串。有关使用多个 CustomEvent 的更详尽的示例，请参见 Web 引擎菜单演示。

示例 2

本示例说明了如何访问自定义数据参数并使用它在 VRED 中调用 Python 函数。如上例所示，创建名为“EventFrontPlate”的前板，然后使用下面的 html 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Custom Event</title>
</head>
<body style="background-color:white;">
    <div class="note">JavaScript Custom Event</div>
    <script>
        document.addEventListener("testEvent", function(event) {
            vred.executePython("printFromJavascript('" + event.detail.custom + "')");
        });
    </script>
</body>
</html>

在 VRED 中，必须执行以下 Python 函数：

def printFromJavascript(data):
  print(data)

然后，我们可以在 VRED 中调用此事件：

we = vrWebEngineService.getWebEngine("EventFrontPlate")
we.sendEvent("testEvent", "{custom: 'test 123'}")

VRED 生成的自定义事件的 Javascript 代码如下所示：

<script>
var e = new CustomEvent("testEvent"
        {
          detail: {custom: 'test 123' }
        });
</script>

VRED 2021.3 中的 API 更改

在 VRED 2021.3 中，必须更改 data 参数以允许复杂事件，如上例所示。sendToWebEngine() 的签名如下：

sendToWebEngine(name, event, data)

在 VRED 2021.3 之前的版本中，将 JavaScript 代码插入网页时，会在内部引用 data 参数。因此，如果您按如下方式调用它：

sendToWebEngine("EventFrontPlate", "testEvent", "test 123")

Javascript 代码应为：

<script>
var e = new CustomEvent("testEvent"
        {
          detail: "test 123" }
        });
</script>

在 VRED 2021.3 及更高版本中，不会自动引用 test 123。如果需要旧行为，需要写下：

sendToWebEngine("EventFrontPlate", "testEvent", "'test 123'")

需要进行此更改，以便可以执行复杂事件；否则，类似以下的调用：

sendToWebEngine("EventFrontPlate", "testEvent", "{custom: 'test 123'}")

可能会产生：

<script>
var e = new CustomEvent("testEvent"
        {
          detail: "{custom: 'test 123' }"
        });
</script>

词典周围的引号无效，因此该事件不起作用，因为用户无法删除引号。

调试自定义事件

由于 VRED 使用 QtWebengine，因此您可以使用 Qt 机制调试嵌入式浏览器。您需要设置环境变量 QTWEBENGINE_REMOTE_DEBUGGING。该值必须是端口号。例如：set QTWEBENGINE_REMOTE_DEBUGGING=9876。

当 VRED 正在运行且 Web 引擎实例处于活动状态时，可以启动 Chrome（或其他基于 Chromium 的浏览器，如 Opera 或 Vivaldi），然后使用其内部远程调试器连接到 VRED 中的 Web 引擎。要执行此操作，请在 Chrome 中转到此 URL：http://localhost:9876。

父页面: VRED Python 示例