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

飘走的落不离

于 2022-12-02 14:35:08 发布

阅读量868

点赞数

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

本文链接：https://blog.youkuaiyun.com/gebieren/article/details/128147607

版权

本文通过实例代码详细介绍了如何在Vue3项目中使用TypeScript实现iframe父页面与子页面之间的值传递，包括父页面向子页面传递数据以及子页面向父页面回传数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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');
  //接受子页面消息