vue3+ts实现iframe父页面与子页面如何传值 demo

最新推荐文章于 2024-05-23 17:34:08 发布

飘走的落不离

最新推荐文章于 2024-05-23 17:34:08 发布

阅读量705

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gebieren/article/details/128147607

版权

父应用：
在这里插入图片描述
代码：

<template>
  <div>iframe的父页面</div>
  <div>接收到的子应用的信息：------------{
  { mainName }}</div>
  <a-bottom @click="sent">给子应用发信息</a-bottom>
  <br />
  <br />
  <br />
  <iframe src="http://localhost:8000/" frameborder="0" id="iframe"></iframe>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
const mainName = ref('');
const iframe = ref(null);

const sent = () => {
  console.log(iframe.value, 'iframe');
  iframe.value.contentWindow.postMessage({ id: Math.random() }, 'http://localhost:8000/');
};

onMounted(async () => {
  iframe.value = document.getElementById('iframe');
  //接受子页面消息
  window.ad