window.postMessage 抛出未定义的错误，即使我检查它不是未定义的

Question

我有一个 React Web 应用程序在 React Native 应用程序的 Web 视图中运行。 React Native 端注入 javascript 来设置

window.postMessage

，如下所示：

<WebView
  injectedJavaScriptBeforeContentLoaded={`
    (function() {
      window.postMessage = function(data) {
        window.ReactNativeWebView.postMessage(data);
      };
    })()
    window.isInApp=true;
    true;`
  }
/>

然后，我在 React Web 应用程序中调用

window.postMessage()

以使 React Native 应用程序对某些按钮按下做出反应：

<Button
  onClick={() => {
    if (window.isInApp) window.postMessage();
    else navigate("/my-trips");
  }}
>
  Exit
</Button>;

（我知道

postMessage()

应该需要参数，但是）这在我的 React web 应用程序中的任何地方都有效，除了一个特定的页面。一开始，我得到了错误

脚本错误。

还有

抛出了跨源错误。 React 无法访问开发中的实际错误对象。

因此，为了查看错误，我将函数调用包装在 try-catch 块中，然后在

alert

:

中显示错误

<Button
  onClick={() => {
    try {
      if (window.isInApp) window.postMessage();
      else navigate("/my-trips");
    } catch (e) {
      alert(e);
    }
  }}
>
  Exit
</Button>;

在 Android Samsung A54 上运行，我得到：

TypeError：无法读取未定义的属性（读取postMessage）

在 iOS iPhone 8 上，我得到这个：

TypeError：未定义不是一个对象（评估'window.ReactNativeWeb-View.postMessage'）

然后，我添加了一些 if 条件以确保窗口不是未定义的，并且还在调用

window

之前和之后的一些

alert

中显示了

window.postMessage()

：

<Button
  onClick={() => {
    try {
      alert(`window: ${window}
        window.postMessage: ${window.postMessage}`)
      if (window && window.postMessage && window.isInApp) window.postMessage();
      else navigate("/my-trips");
    } catch (e) {
      alert(`${e}
        window: ${window}
        window.postMessage: ${window.postMessage}`);
    }
  }}
>
  Exit
</Button>;

但是，我收到完全相同的错误消息，该消息声称

window

未定义，即使我在调用

window.postMessage()

之前和之后检查它是否未定义。我也尝试使用

window.postMessage(true, "*")

只是为了让我没有任何争论，但无济于事。我也没有看到这个特定页面有任何不同之处，可以与使

window

拥有短暂的存在超级状态相关。它几乎是另一个页面的精确复制品，其中相同的功能起作用。

这怎么可能？为什么看起来

window

仅在我 call

window.postMessage()

时未定义，但在

if

检查和

alert

对话中并非未定义？几乎就像一些双缝实验电子行为类型的狗屎？这是啥？

（我知道我应该做一个最小的可重现示例，但这会花费很多时间，我现在不必抽出时间。希望在我诉诸该示例之前有人知道解释/修复。）

Answer 1

听起来问题可能不直接与

window.postMessage

有关，而是与React应用程序的上下文或其依赖项在该特定页面上的行为方式有关。仔细检查该有问题的页面上的任何独特脚本或 iframe 是否会干扰全局

window

对象。另外，请确保通过

window.postMessage

传递的所有数据均已正确序列化，因为对象可能会导致问题。也许尝试使用简单的字符串或 JSON.stringify 您的数据。最后，该页面上的跨域策略可能会更加严格；验证您的内容安全策略标头。