• iframe内的通信（桥接方法），使用postMessage和使用自定义事件

    1、首先看一下我的文档目录
    在这里插入图片描述

    2、 接下来，上代码

    outer.html

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>外部title>

  <style>
    .outer-wrap {
      display: flex;
      width: 500px;
      height: 500px;
      border: 1px solid;
      margin: auto;
    }

    .outer {
      margin: auto;
    }
  style>
head>

<body>
  <div class="outer-wrap">
    <div class="outer">
      外部
      <iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="200"
        src="http://127.0.0.1:5500/iframe/inner.html">
      iframe>
    div>
  div>

  <script>
    // 使用postMessage
    window.addEventListener('message', (event) => {
      console.log('Received message is:使用postMessage', event.data);
    }, false);

    // 使用事件
    window.trigger = () => {
      console.log('使用事件')
    }
  script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    inner.html

    DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内部title>

  <style>
    html,body{
      height: 90%;
    }

    .inner-wrap {
      height: 100%;
      display: flex;
      margin: auto;
    }

    .inner {
      width: 100px;
      height: 100px;
      margin: auto;
      text-align: center;
    }
  style>
head>

<body>
  <div class="inner-wrap">
    <div class="inner">
      <button type='button' id="test" onclick="doSomeThing()">内部点击-使用postMessagebutton>
      <button type='button' id="test" onclick="doSomeThingOther()">内部点击-使用事件button>
    div>
  div>

  <script>
    // 使用postMessage
    const doSomeThing = () => {
      const data = {
        isDJ: true,
        isHoliday: false,
      }
      window.parent.postMessage(data, "*");
    }

    // 使用事件
    const doSomeThingOther = () => {
      window.parent.window.trigger();
    }

  script>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55

    补充：
    这里的http://127.0.0.1:5500/iframe/inner.html是使用 vscode 插件 Open With Live Server启动的

  • 相关阅读:
    记录一次mysql死锁
    k8s编程operator——(3) 自定义资源CRD.md
    什么是PCB中的光学定位点，不加可不可以？
    2024/3/5打卡最长上升子序列**----线性DP，贪心，单调栈
    点餐小程序实战教程08-购物车功能开发
    pyqt环境搭建
    Flutter入门-与原生数据传递
    牛客网语法篇练习循环控制（一）
    Dubbo中@EnableDubbo注解原理
    Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第7章 Vue.js高级进阶 7.8 slot插槽
  • 原文地址：https://blog.csdn.net/weixin_43814775/article/details/133377497