首页 > 其他分享 >iframe通信

iframe通信

时间:2023-05-11 14:46:45浏览次数:27  
标签:iframeRef 通信 contentWindow window iframe message childDefineFunction

目录

1、contentWindow方式通信

  • 声明文件
declare global {
  interface Window {
    childDefineFunction: (message: string) => void
    fatherDefineFunction: (message: string) => void
  }
}

export {}
  • 父窗口
<template>
  <div>
    <button @click="handleClick">父按钮</button>
    <iframe
      style="display: block; width: 100%; height: 600px"
      ref="iframeRef"
      src="/child.html"
      frameborder="0"
    ></iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const iframeRef = ref<HTMLIFrameElement>()

    const handleClick = () => {
      // 需在同一个域
      iframeRef.value?.contentWindow?.childDefineFunction('父向子发送消息')
    }

    window.fatherDefineFunction = (message) => {
      console.log(message)
    }

    return {
      iframeRef,
      handleClick
    }
  }
})
</script>

<style lang="scss" scoped></style>
  • 子窗口
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>子窗口</title>
  <style>
    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      background: #cccccc;
    }
  </style>
</head>
<body>
<button onclick="handleClick()">子按钮</button>
<script>
  window.childDefineFunction = (message) => {
    console.log(message);
  };

  function handleClick() {
    window.parent.fatherDefineFunction("子向父发送消息");
  }
</script>
</body>
</html>

2、contentWindow方式通信

标签:iframeRef,通信,contentWindow,window,iframe,message,childDefineFunction
From: https://www.cnblogs.com/linding/p/17390937.html

相关文章

  • div+iframe代替frameset
     frameset和frame标签已经过时了。框架集不能定义在body标签 HTML框架-csnmd-博客园(cnblogs.com) <html><head><title>网上书店</title><style>body{margin:0;padding:0;border:0;......
  • Linux网络编程:socket实现client/server通信
    一、问题引入阅读UNIX网络编程卷1:套接字联网API第3版的前4个章节,觉得有必要对书籍上的源码案例进行复现,并推敲TCP的C/S通信过程。二、解决过程2-1server#include<sys/types.h>#include<sys/socket.h>#include<stdio.h>#include<netinet/in.h>#include<arpa/inet.h......
  • 网络编程-通信协议-三要素
    1.概述:即通过无线网络或者有线网络可以把不同地理位置且相互独立的计算机连同其外部设备连接起来,组成计算机网络。这样就实现了计算机之间的资源共享和信息的传递。2.网络通信三要素2.1)ip地址网络中计算机的唯一标识;32bit(4字节),一般用“点分十进制”表示,如:192.168.1.158ip地......
  • IO通信机制
    1.IO通信模型IO指的是input和output网络通信的本质是网络间的数据IO。只要有IO,就会有阻塞或非阻塞的问题,无论这个IO是网络的,还是硬盘的。原因在于程序是运行在系统上的,任何形式的IO操作都需要系统支持。2.BIO(阻塞模式)BIO即BlockingIO,是一种阻塞式的IO。jdk1.4版本之前的......
  • 以太网通信控制板-扩展-多路客户端
    <p><iframename="ifd"src="https://mnifdv.cn/resource/cnblogs/CH579_DTU_PBX/index1.html"frameborder="0"scrolling="auto"width="100%"height="1500"></iframe></p> 说明如果......
  • 以太网通信控制板-关于MODBUS, IEEE754浮点数, 字节和位的转换
    <p><iframename="ifd"src="https://mnifdv.cn/resource/cnblogs/CH579_DTU_PBX/index1.html"frameborder="0"scrolling="auto"width="100%"height="1500"></iframe></p> MODBU......
  • pacs系统核心层服务器,PACS(影像归档和通信系统)
    针对目前医疗业务与网络的逐步融合正成为国内外医院信息化发展的趋势,采用c++为编程语言,MSSQL为数据库,DICOM3.0标准为接口,设计和开发了一种基于医学影像PACS,对医疗数据进行采集、分析和处理的系统。经测试,系统运行稳定,性能良好,能够准确有效的对数据进行采集、分析和处理。PACS(影......
  • 带中继节点的蜂窝小区通信系统matlab仿真,输出吞吐量,功耗以及能效等
    1.算法仿真效果matlab2022a仿真结果如下:     2.算法涉及理论知识概要        早期的移动通信是大区制,也就是在一个区域内建一个基站,且尽可能地提高该基站的信号覆盖范围,这种方法的好处是实现容易,设备简单,但由于受功率和频谱资源限制,系统容量有限,而且扩大......
  • m车载自组织网络(Vehicular Ad-hoc Network,VANET)通信系统的matlab仿真
     1.算法仿真效果 matlab2022a仿真结果如下:         2.算法涉及理论知识概要          这里根据那个fluiddynamicmodel和stochasticmodel模型,这里使用一种如下的车辆移动模型,能够反映出车辆移动的随机性和连续性。       ......
  • 解Android系统的进程间通信原理(二)----RPC机制(转)
    解Android系统的进程间通信原理(二)----RPC机制理解Android系统中的轻量级解决方案RPC的原理,需要先回顾一下JAVA中的RMI(RemoteMethodInvocation)这个易于使用的纯JAVA方案(用来实现分布式应用)。有关RMI的相关知识,可以通过下图来归纳:Android中的RPC也是参考了JAVA中......