feat(cli): using postmessage (#8497)

* feat(cli): export action functions

* fix: listenToSyncPath

* fix: config.site.simulatorUrl

packages/vant-cli/site/common/iframe-router.js

@@ -2,28 +2,44 @@
  * 同步父窗口和 iframe 的 vue-router 状态
  */
 
-import { iframeReady, isMobile } from '.';
+import { iframeReady } from '.';
 
-window.syncPath = function() {
+function getCurrentDir() {
   const router = window.vueRouter;
-  const isInIframe = window !== window.top;
-  const currentDir = router.currentRoute.value.path;
+  return router.currentRoute.value.path;
+}
 
-  if (isInIframe) {
-    window.top.replacePath(currentDir);
-  } else if (!isMobile) {
-    const iframe = document.querySelector('iframe');
-    if (iframe) {
-      iframeReady(iframe, () => {
-        iframe.contentWindow.replacePath(currentDir);
-      });
+export function syncPathToParent() {
+  window.top.postMessage(
+    {
+      type: 'replacePath',
+      value: getCurrentDir(),
+    },
+    '*'
+  );
+}
+
+export function syncPathToChild() {
+  const iframe = document.querySelector('iframe');
+  if (iframe) {
+    iframeReady(iframe, () => {
+      iframe.postMessage(
+        {
+          type: 'replacePath',
+          value: getCurrentDir(),
+        },
+        '*'
+      );
+    });
+  }
+}
+
+export function listenToSyncPath(router) {
+  window.addEventListener('message', (event) => {
+    const path = event.data || '';
+    // should preserve hash for anchor
+    if (router.currentRoute.value.path !== path) {
+      router.replace(path).catch(() => {});
     }
-  }
-};
-
-window.replacePath = function(path = '') {
-  // should preserve hash for anchor
-  if (window.vueRouter.currentRoute.value.path !== path) {
-    window.vueRouter.replace(path).catch(() => {});
-  }
-};
+  });
+}

packages/vant-cli/site/desktop/router.js

@@ -3,7 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 import { isMobile, decamelize } from '../common';
 import { config, documents } from 'site-desktop-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import '../common/iframe-router';
+import { listenToSyncPath, syncPathToChild } from '../common/iframe-router';
 
 if (isMobile) {
   location.replace('mobile.html' + location.hash);
@@ -117,7 +117,9 @@ export const router = createRouter({
 });
 
 router.afterEach(() => {
-  nextTick(() => window.syncPath());
+  nextTick(syncPathToChild);
 });
 
+listenToSyncPath(router);
+
 window.vueRouter = router;

packages/vant-cli/site/mobile/router.js

@@ -4,7 +4,7 @@ import DemoHome from './components/DemoHome';
 import { decamelize } from '../common';
 import { demos, config } from 'site-mobile-shared';
 import { getLang, setDefaultLang } from '../common/locales';
-import '../common/iframe-router';
+import { listenToSyncPath, syncPathToParent } from '../common/iframe-router';
 
 const { locales, defaultLang } = config.site;
 
@@ -97,8 +97,10 @@ export const router = createRouter({
 
 watch(router.currentRoute, () => {
   if (!router.currentRoute.value.redirectedFrom) {
-    nextTick(window.syncPath);
+    nextTick(syncPathToParent);
   }
 });
 
+listenToSyncPath(router);
+
 window.vueRouter = router;