feat: postmessage

.env.dev

@@ -4,4 +4,5 @@ APP_BASE_URL=
 DEPLOYED_ENV=Dev
 VITE_GREETINGS=Dev
 AUTH_USER=wkylin.w
-AUTH_PASSWORD=wkylin.w
+AUTH_PASSWORD=wkylin.w
+IFRAME_ORIGIN=http://localhost:8080

.env.development

@@ -4,4 +4,5 @@ DEPLOYED_ENV=Local
 VITE_GREETINGS=Development
 AUTH_USER=wkylin.w
 AUTH_PASSWORD=wkylin.w
-PUBLIC_URL=''
+PUBLIC_URL=''
+IFRAME_ORIGIN=http://localhost:8080

.env.production

@@ -8,4 +8,5 @@ AUTH_USER=wkylin.w
 AUTH_PASSWORD=wkylin.w
 # github pages
 # PUBLIC_URL='/pro-react-admin'
-PUBLIC_URL=''
+PUBLIC_URL=''
+IFRAME_ORIGIN=https://wkylin.github.io/pro-react-admin

src/pages/bigScreen/chinaMap/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import EChartsCommon from '@stateless/EChartsCommon'
-import { mapOptions } from './options'
+import mapOptions from './options'
 
 const ChinaMap = () => {
   const [mapData] = useState({

src/pages/bigScreen/chinaMap/options.ts

@@ -1626,7 +1626,7 @@ const mapData = {
   ],
 }
 
-export const mapOptions = (params: any) => ({
+const mapOptions = (params: any) => ({
   title: {
     show: false,
     text: '全国物流输送图',
@@ -1651,9 +1651,9 @@ export const mapOptions = (params: any) => ({
     zoom: 1.2,
     itemStyle: {
       normal: {
-        borderColor: 'rgba(255,209,163, .5)', //区域边框颜色
-        areaColor: 'rgba(73,86,166,.1)', //区域颜色
-        borderWidth: 0.5, //区域边框宽度
+        borderColor: 'rgba(255,209,163, .5)', // 区域边框颜色
+        areaColor: 'rgba(73,86,166,.1)', // 区域颜色
+        borderWidth: 0.5, // 区域边框宽度
         shadowBlur: 5,
         shadowColor: 'rgba(107,91,237,.7)',
       },
@@ -1733,3 +1733,5 @@ export const mapOptions = (params: any) => ({
     },
   ],
 })
+
+export default mapOptions

src/pages/dashboard/index.jsx

@@ -11,7 +11,7 @@ const Dashboard = () => {
   const navigate = useNavigate()
   // const navigateType = useNavigationType()
   const {
-    token: { colorBgContainer }
+    token: { colorBgContainer },
   } = theme.useToken()
 
   return (
@@ -20,16 +20,16 @@ const Dashboard = () => {
         <Content style={{ height: '100%', background: colorBgContainer }}>
           <Routes>
             <Route
-              path='/'
+              path="/"
               element={
                 <>
                   {/* <h2>Look, more routes!</h2> */}
                   {/* <h2>Navigate type: {navigateType}</h2> */}
                   <Space>
-                    <Button type='primary' onClick={() => navigate('/')}>
+                    <Button type="primary" onClick={() => navigate('/')}>
                       Navigate /
                     </Button>
-                    <Button type='primary' onClick={() => navigate('invoices')}>
+                    <Button type="primary" onClick={() => navigate('invoices')}>
                       navigate to invoices
                     </Button>
                   </Space>
@@ -38,10 +38,10 @@ const Dashboard = () => {
               }
             />
             <Route
-              path='invoices'
+              path="invoices"
               element={
                 <>
-                  <Button type='primary' onClick={() => navigate(-1)}>
+                  <Button type="primary" onClick={() => navigate(-1)}>
                     navigate to dashborad
                   </Button>
                 </>

src/pages/layout/proSecNav/index.jsx

@@ -80,6 +80,7 @@ const ProSecNav = () => {
     { label: 'Dynamic', key: '/dynamic', icon: <QrcodeOutlined /> },
     { label: 'BigScreen', key: '/big-screen', icon: <FireOutlined /> },
     { label: 'ReactAmap', key: '/react-amap', icon: <QrcodeOutlined /> },
+    { label: 'PostMessage', key: '/postmessage', icon: <FireOutlined /> },
     {
       label: '技术栈',
       key: '/sub-act',

src/pages/postmessage/index.jsx

@@ -0,0 +1,50 @@
+import React, { useRef, useEffect } from 'react'
+
+const PostMessage = () => {
+  const origin = process.env.IFRAME_ORIGIN
+  const childOrigin = `${process.env.IFRAME_ORIGIN}/#/my-iframe`
+  const ref = useRef()
+
+  const onReceivedMessage = (event) => {
+    if (event.origin !== childOrigin) {
+      // do something with the received messages
+    }
+
+    // do something with the received messages
+  }
+
+  const sendMessage = () => {
+    if (!ref.current) {
+      return
+    }
+    ref.current.contentWindow.postMessage(`Hello iframe!${Math.random()}`, origin)
+  }
+
+  useEffect(() => {
+    window.addEventListener('message', onReceivedMessage)
+
+    return () => {
+      window.removeEventListener('message', onReceivedMessage)
+    }
+  })
+
+  return (
+    <>
+      <button onClick={sendMessage}>send a message</button>
+
+      <iframe
+        style={{
+          display: 'block',
+          border: 'none',
+          width: '100%',
+        }}
+        src={childOrigin}
+        ref={ref}
+        width="800px"
+        height="600px"
+      />
+    </>
+  )
+}
+
+export default PostMessage

src/pages/postmessage/myIframe/index.jsx

@@ -0,0 +1,32 @@
+import React, { useState, useEffect } from 'react'
+
+const MyIFrame = () => {
+  const parentOrigin = 'http://localhost:8080'
+  const [message, setMessage] = useState() // string | undefined
+
+  const onReceivedMessage = (event) => {
+    // check the message source origin as a security measure
+    if (event.origin !== parentOrigin) {
+      return
+    }
+
+    // see notes on checking the data type
+    setMessage(event.data)
+  }
+
+  useEffect(() => {
+    window.addEventListener('message', onReceivedMessage)
+
+    return () => {
+      window.removeEventListener('message', onReceivedMessage)
+    }
+  })
+
+  if (!message) {
+    return <p>no message has been received</p>
+  }
+
+  return <p>message received: {message}</p>
+}
+
+export default MyIFrame

src/routers/index.jsx

@@ -37,6 +37,8 @@ const PrismRender = lazy(() => import('@pages/prism'))
 // const DynamicModal = lazy(() => import('@pages/dynamicModal'))
 const BigScreen = lazy(() => import('@pages/bigScreen'))
 const ReactAmap = lazy(() => import('@pages/reactAmap'))
+const PostMessage = lazy(() => import('@pages/postmessage'))
+const MyIframe = lazy(() => import('@pages/postmessage/myIframe'))
 const Exception403 = lazy(() => import('@stateless/Exception/exception403'))
 const NoMatch = lazy(() => import('@stateless/NoMatch'))
 
@@ -178,6 +180,22 @@ const rootRouter = [
         auth: false,
         element: lazyLoad(ReactAmap),
       },
+      {
+        index: false,
+        path: 'postmessage',
+        name: 'postmessage',
+        key: '/postmessage',
+        auth: false,
+        element: lazyLoad(PostMessage),
+      },
+      {
+        index: false,
+        path: 'my-iframe',
+        name: 'my-iframe',
+        key: '/my-iframe',
+        auth: false,
+        element: lazyLoad(MyIframe),
+      },
       {
         index: false,
         path: 'coupons',

src/utils/publicFn/index.jsx

@@ -20,7 +20,7 @@ export const getKeyName = (pathName = '/404') => {
       title: 'Not Found',
       tabKey: '/404',
       element: <Exception404 />,
-      i18nKey: 'notFound'
+      i18nKey: 'notFound',
     }
   }
 
@@ -64,7 +64,7 @@ export const formatTime = (time, fmt) => {
     'm+': date.getMinutes(),
     's+': date.getSeconds(),
     'q+': Math.floor((date.getMonth() + 3) / 3),
-    S: date.getMilliseconds()
+    S: date.getMilliseconds(),
   }
   if (/(y+)/.test(fmt)) {
     fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))