iframe 使用以及互相传值

<div class="aiWrite">
        <iframe
          v-if="aiWriteShow"
          ref="iframeRef"
          style="width: 100%; min-height: calc(100vh - 216px)"
          name="iframePage"
          :src="iframeUrl"
          frameborder="0"
          scrolling="no"
        ></iframe>
      </div>

  iframeUrl.value = `${window.origin}/kb-web/aiWrite/aiwriteTempIframe?id=${templateId.value}`; 

可以通过url 传值到内嵌页面中

 

内嵌页面向外传值：

 window.parent.postMessage(
        { manuscriptBody: JSON.stringify(formData.manuscriptBody), id:  response.data.data.id }, '*'
);            

拿到数据后向外传值

外部接收：

const dataVal = ref()
onMounted(() => {
  window.addEventListener('message', event => {
    if (event.source === iframeRef.value.contentWindow) {
      dataVal.value = event.data;
    }
  });
});