test

src/views/useCase/components/requirementCase.vue

@@ -1,12 +1,10 @@
 <template>
   <section v-if="bizId !== -1" class="case-main">
     <iframe
-      ref="useCaseIframe"
-      class="useCaseIframe"
+      id="useCaseIframe"
       frameborder="0"
       scrolling="no"
       :src="src"
-      @load="loaded"
     />
   </section>
 </template>
@@ -38,17 +36,18 @@ export default {
     }
   },
   mounted() {
-    if (this.$refs.useCaseIframe) {
-      console.log(this.$refs.useCaseIframe.contentWindow)
-      this.ifr = this.$refs.useCaseIframe.contentWindow
-    }
+    window.addEventListener('message', (e) => {
+      console.log(11111, e)
+      if (e.data === 'useCaseDone') {
+        this.loaded()
+      }
+    }, false)
   },
   methods: {
     loaded() {
-      console.log(this.ifr)
-      if (this.ifr) {
-        console.log(111, this.ifr)
-        this.ifr.postMessage({ user: localStorage.getItem('username') }, '*')
+      const ifr = document.getElementById('useCaseIframe')
+      if (ifr) {
+        ifr.contentWindow.postMessage({ user: localStorage.getItem('username') }, '*')
       }
     }
   }
@@ -61,7 +60,7 @@ export default {
   // border-radius: 10px;
   overflow: scroll;
 }
-.useCaseIframe {
+#useCaseIframe {
   width: 100%;
   height: 100vh;
 }