小编Ale*_*shi的帖子

我想使用 React Hooks 与 iframe 进行通信。我尝试在父 iframe 和子 iframe 中使用postMessage和addEventListener 。

我想按下父 iframe 中的按钮并向子 iframe 发送消息，反之亦然，但是，它不起作用。问题是什么？使用 next.js 时，addEventListener 无法在 React hook 中工作

代码沙盒项目链接

https://codesandbox.io/s/snowy-smoke-wyftk

父母 iframe -index.js

import { useRef, useEffect, useState } from "react";

const IndexPage = () => {
  const IFrameRef = useRef(null);
  const [receivedMsg, setReceivedMsg] = useState("");

  const sendMessage = () => {
    console.log("send parents msg");
    if (!IFrameRef.current) return;
    IFrameRef.current.contentWindow.postMessage(
      "Hello son",
      "https://wyftk.sse.codesandbox.io/"
    );
  };

  useEffect(() => {
    window.addEventListener("message", function (e) {
      if (e.origin …

我尝试使用职员进行身​​份验证。在本地运行良好。但是，当我通过 vercel 在生产中部署时它不起作用。它表明This Edge Function has crashed.。我不知道这里发生了什么。有人有想法吗？我正在使用 nextjs 应用程序目录。

"react": "18.2.0",
"react-dom": "18.2.0",
"next": "13.4.12",
"next-intl": "^2.19.0",

中间件.ts

"react": "18.2.0",
"react-dom": "18.2.0",
"next": "13.4.12",
"next-intl": "^2.19.0",

next.config.js

import { authMiddleware } from "@clerk/nextjs";
import createMiddleware from "next-intl/middleware";

const intlMiddleware = createMiddleware({
  locales: ["en", "zh"],
  defaultLocale: "en",
});

export default authMiddleware({
  beforeAuth: (req) => {
    return intlMiddleware(req);
  },

  publicRoutes: ["/"],
});

// export default authMiddleware();

export const config = {
  matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
};