AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

postMessage踩坑实践

2023-05-12 114
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在低代码编辑器中进行页面预览常常不得不用到iframe进行外链的url引入，这就涉及到了预览页面与编辑器页面数据通信传值的问题，常常用到的方案就是postMessage传值，而postMessage本身在eventloop中也是一个宏任务，就会涉及到浏览器消息队列处理的问题，本文旨在针对项目中的postMessage的相关踩坑实践进行总结，也为想要使用postMessage传递数据的童鞋提供一些避坑思路。

前端 | postMessage踩坑实践.png

前言

在低代码编辑器中进行页面预览常常不得不用到iframe进行外链的url引入，这就涉及到了预览页面与编辑器页面数据通信传值的问题，常常用到的方案就是postMessage传值，而postMessage本身在eventloop中也是一个宏任务，就会涉及到浏览器消息队列处理的问题，本文旨在针对项目中的postMessage的相关踩坑实践进行总结，也为想要使用postMessage传递数据的童鞋提供一些避坑思路。

场景

专网自服务项目大屏部署在另外一个url上，因而ui需要预览的方案不得不使用iframe进行嵌套，而这里需要将token等一系列信息传递给大屏，这里采用了postMessage进行传值

案例

[bug描述] 通过postMessage传递过程中，无法通过模拟点击事件进行数据传值

[bug分析] postMessage是宏任务，触发机制会先放到浏览器的消息队列中，然后再进行处理，vue、react都会自己实现自己的事件机制，而不触发真正的浏览器的事件机制

[解决方案] 使用setTimeout处理，将事件处理放在浏览器idle阶段触发回调函数的处理，需要注意传递message的大小

复现

引用的地址

使用express启动了一个静态服务，iframe中的页面

<!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>3000</title>
</head>

<body>
    <h1>
        这是一个前端BFF应用
    </h1>
    <div id="oDiv">
    </div>
    <script>
        console.log('name', window.name)
        oDiv.innerHTML = window.name;
        
        // window.addEventListener('message', function(e){
        //     console.log('data', e.data)
        //     oDiv.innerHTML = e.data;
        // })
    </script>
</body>

</html>

当消息回来后会在页面上进行显示

vue应用

vue-cli启动了一个简单的引入iframe页面的文件

<template>
  <div id="container">
    frameLabelStart--frameLabelEnd 
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: '',
    },
    width: {
      type: String | Number,
    },
    height: {
      type: String | Number,
    },
    id: {
      type: String,
      default: '',
    },
    content: {
      type: String,
      default: '',
    },
    full: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: '',
    },
  },
  mounted() {
    // this.postMessage()
    this.createPost()
  },
  methods: {
    createPost() {
      const btn = document.createElement('a')
      btn.setAttribute('herf', 'javascript:;')
      btn.setAttribute(
        'onclick',
        "document.getElementById('ifr').contentWindow.postMessage('123', '*')"
      )
      btn.innerHTML = 'postMessage'
      document.getElementById('container').appendChild(btn)
      btn.click()
      // document.getElementById('container').removeChild(btn)
    },
    postMessage() {
      document.getElementById('ifr').contentWindow.postMessage('123', '*') 
    }
  },
}
</script>

<style>
</style>

react应用

使用create-react-app启动了一个react应用，分别通过函数式组件及类组件进行了尝试

函数式组件

// 函数式组件
import { useRef, useEffect } from 'react'

const createBtn = () => {
  const btn = document.createElement('a')
  btn.setAttribute('herf', 'javascript:;')
  btn.setAttribute(
    'onclick',
    "document.getElementById('ifr').contentWindow.postMessage('123', '*')",
  )
  btn.innerHTML = 'postMessage'
  document.getElementById('container').appendChild(btn)
  btn.click()
  // document.getElementById('container').removeChild(btn)
}

const Frame = (props) => {
  const { name, full, width, height, src } = props
  const ifr = useRef(null)
  useEffect(() => {
    createBtn()
  }, [])
  return (
    <div id="container">
      frameLabelStart--frameLabelEnd 
    </div>
  )
}

export default Frame

类组件

// 类组件
import React from 'react'

const createBtn = () => {
  const btn = document.createElement('a')
  btn.setAttribute('herf', 'javascript:;')
  btn.setAttribute(
    'onclick',
    "document.getElementById('ifr').contentWindow.postMessage('123', '*')",
  )
  btn.innerHTML = 'postMessage'
  document.getElementById('container').appendChild(btn)
  btn.click()
  // document.getElementById('container').removeChild(btn)
}


class OtherFrame extends React.Component {
  constructor(props) {
    super(props)
  }

  componentDidMount() {
    createBtn()
  }

  render() {
    return (
      <div id="container">
        frameLabelStart--frameLabelEnd 
      </div>
    )
  }
}

export default OtherFrame

原生应用

使用原生js书写，既可以通过创建button绑定事件又可以通过a标签绑定事件，是没有任何影响的

<!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>原生js</title>
    <script>
    </script>
</head>

<body>
    frameLabelStart-http://localhost:3000" width="100%" height="540px" frameborder="0-frameLabelEnd 
    <!-- <script>
        window.onload = function() {
            const btn = document.createElement('button');
            btn.innerHTML = 'postMessge'
            btn.addEventListener('click', function() {
                ifr.contentWindow.postMessage('123', "*")
            })
            document.body.appendChild(btn)
            btn.click()
            // document.body.removeChild(btn)
        }
    </script> -->
    <script>
        window.onload = function () {
            const btn = document.createElement('a')
            btn.setAttribute('herf', 'javascript:;')
            btn.setAttribute(
                'onclick',
                "document.getElementById('ifr').contentWindow.postMessage('123', '*')"
            )
            btn.innerHTML = 'postMessage'
            document.body.appendChild(btn)
            btn.click()
            // document.body.removeChild(btn)
        }
    </script>
</body>

</html>

源码

上面几个示例使用模拟点击事件为了清晰显示标签，发现通过页面点击事件后（通过页面句柄的方式）是可以进行message信息获取的，但是vue和react都对事件进行了代理，从而无法通过attachEvent来进行自生成标签添加事件

vue

// on实现原理
// v-on是一个指令，vue中通过wrapListeners进行了一个包裹，而wrapListeners的本质是一个bindObjectListeners的renderHelper方法，将事件名称放在了一个listeners监听器中

Vue.prototype.$on = function(event, fn) {
  if(Array.isArray(event)) {
    for(let i=0, l=event.length; i < l; i++) {
      this.$on(event[i], fn)
    }
  } else {
    (this._events[event] || this._events[event] = []).push(fn)
  }

  return this;
}

Vue.prototype.$off = function (event, fn) {
    // all
    if (!arguments.length) {
      this._events = Object.create(null)
      return this
    }
    // array of events
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.$off(event[i], fn)
      }
      return this
    }
    // specific event
    const cbs = this._events[event]
    if (!cbs) {
      return this
    }
    if (!fn) {
      this._events[event] = null
      return this
    }
    // specific handler
    let cb
    let i = cbs.length
    while (i--) {
      cb = cbs[i]
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1)
        break
      }
    }
    return this
  }

  Vue.prototype.$emit = function (event) {
    let cbs = this._events[event]
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
    }
    return this
  }

react

// 合成事件
function createSyntheticEvent(Interface: EventInterfaceType) {
  function SyntheticBaseEvent(
    reactName: string | null,
    reactEventType: string,
    targetInst: Fiber,
    nativeEvent: {[propName: string]: mixed},
    nativeEventTarget: null | EventTarget,
  ) {
    this._reactName = reactName;
    this._targetInst = targetInst;
    this.type = reactEventType;
    this.nativeEvent = nativeEvent;
    this.target = nativeEventTarget;
    this.currentTarget = null;

    for (const propName in Interface) {
      if (!Interface.hasOwnProperty(propName)) {
        continue;
      }
      const normalize = Interface[propName];
      if (normalize) {
        this[propName] = normalize(nativeEvent);
      } else {
        this[propName] = nativeEvent[propName];
      }
    }

    const defaultPrevented =
      nativeEvent.defaultPrevented != null
        ? nativeEvent.defaultPrevented
        : nativeEvent.returnValue === false;
    if (defaultPrevented) {
      this.isDefaultPrevented = functionThatReturnsTrue;
    } else {
      this.isDefaultPrevented = functionThatReturnsFalse;
    }
    this.isPropagationStopped = functionThatReturnsFalse;
    return this;
  }

  Object.assign(SyntheticBaseEvent.prototype, {
    preventDefault: function() {
      this.defaultPrevented = true;
      const event = this.nativeEvent;
      if (!event) {
        return;
      }

      if (event.preventDefault) {
        event.preventDefault();
      } else if (typeof event.returnValue !== 'unknown') {
        event.returnValue = false;
      }
      this.isDefaultPrevented = functionThatReturnsTrue;
    },

    stopPropagation: function() {
      const event = this.nativeEvent;
      if (!event) {
        return;
      }

      if (event.stopPropagation) {
        event.stopPropagation();
      } else if (typeof event.cancelBubble !== 'unknown') {
        event.cancelBubble = true;
      }

      this.isPropagationStopped = functionThatReturnsTrue;
    },

    
    persist: function() {
      /
    },
    isPersistent: functionThatReturnsTrue,
  });
  return SyntheticBaseEvent;
}

chromium

chromium中关于postmessage的实现主要通过cast中的message实现了消息的监听与分发

#include "components/cast/message_port/cast_core/message_port_core_with_task_runner.h"

#include "base/bind.h"
#include "base/logging.h"
#include "base/sequence_checker.h"
#include "base/threading/sequenced_task_runner_handle.h"

namespace cast_api_bindings {

namespace {
static uint32_t GenerateChannelId() {
  // Should theoretically start at a random number to lower collision chance if
  // ports are created in multiple places, but in practice this does not happen
  static std::atomic<uint32_t> channel_id = {0x8000000};
  return ++channel_id;
}
}  // namespace

std::pair<MessagePortCoreWithTaskRunner, MessagePortCoreWithTaskRunner>
MessagePortCoreWithTaskRunner::CreatePair() {
  auto channel_id = GenerateChannelId();
  auto pair = std::make_pair(MessagePortCoreWithTaskRunner(channel_id),
                             MessagePortCoreWithTaskRunner(channel_id));
  pair.first.SetPeer(&pair.second);
  pair.second.SetPeer(&pair.first);
  return pair;
}

MessagePortCoreWithTaskRunner::MessagePortCoreWithTaskRunner(
    uint32_t channel_id)
    : MessagePortCore(channel_id) {}

MessagePortCoreWithTaskRunner::MessagePortCoreWithTaskRunner(
    MessagePortCoreWithTaskRunner&& other)
    : MessagePortCore(std::move(other)) {
  task_runner_ = std::exchange(other.task_runner_, nullptr);
}

MessagePortCoreWithTaskRunner::~MessagePortCoreWithTaskRunner() = default;

MessagePortCoreWithTaskRunner& MessagePortCoreWithTaskRunner::operator=(
    MessagePortCoreWithTaskRunner&& other) {
  task_runner_ = std::exchange(other.task_runner_, nullptr);
  Assign(std::move(other));

  return *this;
}

void MessagePortCoreWithTaskRunner::SetTaskRunner() {
  task_runner_ = base::SequencedTaskRunnerHandle::Get();
}

void MessagePortCoreWithTaskRunner::AcceptOnSequence(Message message) {
  DCHECK(task_runner_);
  DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_);
  task_runner_->PostTask(
      FROM_HERE,
      base::BindOnce(&MessagePortCoreWithTaskRunner::AcceptInternal,
                     weak_factory_.GetWeakPtr(), std::move(message)));
}

void MessagePortCoreWithTaskRunner::AcceptResultOnSequence(bool result) {
  DCHECK(task_runner_);
  DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_);
  task_runner_->PostTask(
      FROM_HERE,
      base::BindOnce(&MessagePortCoreWithTaskRunner::AcceptResultInternal,
                     weak_factory_.GetWeakPtr(), result));
}

void MessagePortCoreWithTaskRunner::CheckPeerStartedOnSequence() {
  DCHECK(task_runner_);
  DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_);
  task_runner_->PostTask(
      FROM_HERE,
      base::BindOnce(&MessagePortCoreWithTaskRunner::CheckPeerStartedInternal,
                     weak_factory_.GetWeakPtr()));
}

void MessagePortCoreWithTaskRunner::StartOnSequence() {
  DCHECK(task_runner_);
  DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_);
  task_runner_->PostTask(FROM_HERE,
                         base::BindOnce(&MessagePortCoreWithTaskRunner::Start,
                                        weak_factory_.GetWeakPtr()));
}

void MessagePortCoreWithTaskRunner::PostMessageOnSequence(Message message) {
  DCHECK(task_runner_);
  DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_);
  task_runner_->PostTask(
      FROM_HERE,
      base::BindOnce(&MessagePortCoreWithTaskRunner::PostMessageInternal,
                     weak_factory_.GetWeakPtr(), std::move(message)));
}

void MessagePortCoreWithTaskRunner::OnPipeErrorOnSequence() {
  DCHECK(task_runner_);
  DCHECK_CALLED_ON_VALID_SEQUENCE(sequence_);
  task_runner_->PostTask(
      FROM_HERE,
      base::BindOnce(&MessagePortCoreWithTaskRunner::OnPipeErrorInternal,
                     weak_factory_.GetWeakPtr()));
}

bool MessagePortCoreWithTaskRunner::HasTaskRunner() const {
  return !!task_runner_;
}

}

总结

postMessage看似简单，其实则包内含了浏览器的事件循环机制以及不同VM框架的事件处理方式的不同，事件处理对前端来说是一个值得深究的问题，从js的单线程非阻塞异步范式到VM框架的事件代理以及各种js事件库（如EventEmitter、co等），一直贯穿在前端的各个方面，在项目中的踩坑不能只是寻求解决问题就可以了，更重要的是我们通过踩坑而获得对于整个编程思想的认知提升，学习不同大佬的处理模式，灵活运用，才能提升自己的技术实力与代码优雅程度，共勉！！！

参考

文章标签：
JavaScript
前端开发
消息中间件
维李设论
目录
相关文章
进步`于辰
|
1月前
|
JSON JavaScript 前端开发
[JS]面试官：你的简历上写着熟悉jsonp，那你说说它的底层逻辑是怎样的？
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念，然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式，并提供了具体的代码示例。最后，通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
进步`于辰
38 2
[JS]面试官：你的简历上写着熟悉jsonp，那你说说它的底层逻辑是怎样的？
干饭小白
终于搞明白什么叫做回调了
终于搞明白什么叫做回调了
干饭小白
61 0
虎妞先生
|
前端开发 JavaScript
一篇文章搞懂前端事件监听
一篇文章搞懂前端事件监听
虎妞先生
359 0
前端歌谣
|
前端开发
前端学习案例1-事件代理1
前端学习案例1-事件代理1
前端歌谣
70 0
前端学习案例1-事件代理1
前端歌谣
|
前端开发
前端学习案例3-事件代理3
前端学习案例3-事件代理3
前端歌谣
83 0
前端学习案例3-事件代理3
前端歌谣
|
前端开发
前端知识案例-eventloop
前端知识案例-eventloop
前端歌谣
41 0
前端知识案例-eventloop
颜酱
|
缓存 前端开发 API
异步的发展，顺手学会怎么处理多请求
异步的发展，顺手学会怎么处理多请求
颜酱
127 0
赤蓝紫
|
XML JSON 前端开发
重走Ajax之路(一)
重走Ajax之路(一)
赤蓝紫
101 0
赤蓝紫
|
JSON 前端开发 JavaScript
重走Ajax之路(二)
重走Ajax之路(二)
赤蓝紫
97 0
小猪课堂
|
JavaScript
面试官：谈谈你对JS点击事件的理解和感悟？
前言 这是一道比较经典的面试题，主要考察的是面试者原生 JS 的基础怎么样，以及对 JS 的一些理解。很多小伙伴可能大概会想到事件捕获和冒泡等，确实没有题。但是很多小伙伴都是模模糊糊，理解得不够透彻，今天我们就来梳理一下。
小猪课堂
266 0
面试官：谈谈你对JS点击事件的理解和感悟？

热门文章

最新文章

  • 1
    《Stata统计分析与应用（第2版）》一3.4 图形的保存、合并及修改
  • 2
    Maven 3.6.3 的下载、安装、配置、检测（详细讲解）
  • 3
    基于区块链的机器学习模型创建方案
  • 4
    WPF listview item mouse enter/over popup
  • 5
    DevExpress 10.2.4系列-ASPxListBox根据列值不同设置不同图标
  • 6
    [Spring]支持注解的Spring调度器
  • 7
    红帽7.4新增的安全特性
  • 8
    hdu 1800 Flying to the Mars
  • 9
    研究 flex 4 开发后台管理项目（1）
  • 10
    Error: XML response that was returned...
  • 1
    《docker高级篇（大厂进阶）：2.DockerFile解析》包括：是什么、DockerFile构建过程解析、DockerFile常用保留字指令、案例、小总结
    112
  • 2
    《Java 人工智能开发：Eclipse 与 IntelliJ IDEA 双雄助力》
    42
  • 3
    《Java 在开源 AI 框架中的中流砥柱角色》
    30
  • 4
    《Java 与大数据框架：AI 数据预处理的强力联盟》
    36
  • 5
    《Java 优化秘籍：计算密集型 AI 任务加速指南》
    33
  • 6
    《Java 与 OpenAI 协同：开启智能编程新范式》
    25
  • 7
    uniapp开发鸿蒙，是前端新出路吗？
    28
  • 8
    鸿蒙(HarmonyOS)原生AI能力之文本识别
    36
  • 9
    鸿蒙开发之PixelMap介绍与实现图片变换
    33
  • 10
    鸿蒙(HarmonyOS)开发之无须申请权限写入图片到相册
    38

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    【案例实战】SpringBoot整合阿里云文件上传OSS