Webview2 输入框值离奇消失？揭秘背后的真相与解决之道

2024-03-10 07:36:19

Webview2 中输入框值的神秘消失：揭秘与解决

问题

在 Webview2 中，使用 ExecuteScriptAsync 设置输入框的值时，可能会遇到一个恼人的问题。在提交表单后，输入的值莫名消失，仿佛从未存在过。这让人困惑不已，尤其是当尝试实现用户交互时。

原因

要理解这个问题，我们需要了解 ExecuteScriptAsync 的工作原理。它允许在 Webview2 上下文中执行 JavaScript 脚本，但问题就在于此处。当表单提交时，页面重新加载，导致 Webview2 上下文重置，抹去脚本设置的值。

解决方法

解决这个问题需要一种方法来在表单提交后保留脚本设置的值。为此，我们可以利用 JavaScript 监听器，在表单提交前将输入框的值存储到持久存储中。

下面是一个改进的代码示例：

// 创建一个脚本函数来获取输入框的值
var getValue = function () {
  return document.evaluate("//descendant::input[@placeholder='Type the code']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.value;
};

// 在表单提交事件上添加一个监听器
document.addEventListener("submit", function (e) {
  // 阻止默认表单提交行为
  e.preventDefault();

  // 获取输入框的值
  var value = getValue();

  // 将值存储到持久存储中（例如 Cookie 或本地存储）
  localStorage.setItem("inputValue", value);

  // 提交表单
  this.submit();
});

// 在页面加载时检索并设置输入框的值
window.addEventListener("load", function () {
  // 从持久存储中检索值
  var value = localStorage.getItem("inputValue");

  // 设置输入框的值
  if (value) {
    document.evaluate("//descendant::input[@placeholder='Type the code']", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue.value = value;
  }
});