通过iframe加载全景，通过发消息实现切换镜头

src/views/PanoView.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="pano-view">
-    <div id="pano" />
+    <!-- <div id="pano" /> -->
+    <iframe
+      ref="panoIframe"
+      :src="iframeSrc"
+      frameborder="0"
+    />
     <button
       class="return-home"
       @click="router.push({
@@ -209,7 +214,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, nextTick } from "vue"
+import { ref, computed, watch, onMounted, nextTick, watchEffect } from "vue"
 import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"
 import { useStore } from "vuex"
 import * as krfn from "@/libs/pano-core/index.js"
@@ -288,7 +293,6 @@ onBeforeRouteUpdate((to, from) => {
   }
 })
 
-
 const {
   windowSizeInCssForRef,
   windowSizeWhenDesignForRef,
@@ -382,14 +386,22 @@ function onEffectVideoEnd() {
   }, 2500)
 }
 
+const iframeSrc = process.env.VUE_APP_CLI_MODE === 'dev' ? 'http://192.168.0.27:8082/show.html?id=WK1730428603763576832&vr=fd720_CKI5Ly4eo&lang=zh' : 'https://houseoss.4dkankan.com/project/yzdyh-dadu/pano/show.html?id=WK1730428603763576832&vr=fd720_CKI5Ly4eo&lang=zh'
+const panoIframe = ref(null)
+
+watch(cameraIdx, (vNew) => {
+  console.log('post message!')
+  panoIframe.value.contentWindow.postMessage({
+    msgName: 'change-scene',
+    sceneId: store.getters.catalogTopology[sceneIdx.value].children[0].children[cameraIdx.value].id
+  }, '*')
+}, {
+  deep: true,
+})
+
 /**
  * 全景图
  */
-let __krfn = krfn.default
-window.__krfn = __krfn
-
-let scene = null
-
 function fixPanoData(panoData) {
   // 丢弃没有包含场景的二级分组
   let tmp = []
@@ -468,60 +480,13 @@ function fixPanoData(panoData) {
   }
 }
 
-function loadScene(sceneIdx, cameraIdx) {
-  scene = store.getters.catalogTopology[sceneIdx].children[0].children[cameraIdx]
-
-  $("#pano").empty()
-  window.vrInitFn = () => {
-    // eslint-disable-next-line no-undef
-    // $smallWaiting.hide()
-    var krpano = document.getElementById("krpanoSWFObject")
-    __krfn.utils.initHotspot(krpano, scene.someData, false)
-  }
-  window.vrViewFn = () => {
-    try {
-      let tmp = scene.initVisual || {}
-      var krpano = document.getElementById("krpanoSWFObject")
-      krpano.set("view.vlookat", tmp.vlookat || 0)
-      krpano.set("view.hlookat", tmp.hlookat || 0)
-      krpano.set("autorotate.enabled", Boolean(store.state.panoData.isAuto))
-    } catch (error) {
-      console.log(error)
-    }
-  }
-  let settings = {
-    "events[skin_events].onxmlcomplete": "js(window.vrViewFn());",
-    "events[skin_events].onloadcomplete": "js(window.vrInitFn());",
-  }
-  // eslint-disable-next-line no-undef
-  removepano("#pano")
-  // eslint-disable-next-line no-undef
-  embedpano({
-    xml: `https://4dkk.4dage.com/720yun_fd_manage/${scene.sceneCode}/vtour/tour.xml`,
-    swf: `${process.env.BASE_URL}static/template/tour.swf`, // 文件名tour.swf没看出来有啥作用，不写也行。但它的路径决定了 %SWFPATH% 的值。
-    target: "pano",
-    html5: "auto",
-    mobilescale: 1,
-    vars: settings,
-    passQueryParameters: true,
-  })
-}
-
 onMounted(() => {
   api.fetchPanoData('WK1730428603763576832').then((res) => {
     fixPanoData(res)
     store.commit('setPanoData', res)
     console.log('catalogTopology', store.getters.catalogTopology)
-    loadScene(Number(sceneIdx.value), Number(cameraIdx.value))
   })
 })
-
-onBeforeRouteUpdate((to, from) => {
-  console.log('to: ', to)
-  if (to.name === route.name) {
-    loadScene(Number(to.query.sceneIdx), Number(to.query.cameraIdx))
-  }
-})
 </script>
 
 <style lang="less" scoped>
@@ -531,7 +496,7 @@ onBeforeRouteUpdate((to, from) => {
 .pano-view{
   position: relative;
   height: 100%;
-  >#pano{
+  >iframe{
     position: absolute;
     left: 0;
     top: 0;