iframe潜入的code-server与宿主页面通讯问题

发表于 更新于 阅读次数： 本文字数： 669 阅读时长 ≈ 1 分钟

背景

  1. 网页iframe嵌入了code-server web，两个网页是同站，现在需要code-server下在触发操作后发送消息给宿主页面。

需求细化

  1. code-server 进行定制UI，支持显示一些按钮，比如可以在顶部右侧工具栏
  2. code-server可以与宿主页面进行通讯

方案

首先需要知道code-server的限制，code-server extension是无法在title位置增加自定义按钮的。通过插件方案也只可以改变底部状态栏及左侧activity按钮

  1. 宿主页面元素绘制，通过定位移动到code-server处
    • 该方案优势：不需要定制code-server，
    • 弊端：code-server的title bar/布局控件是可以自由设置开关，如果关闭了，即显的很突兀，这样又需要watch编辑器中的显示变动
  2. code-server extension
    • activitybar注册按钮或直接编辑器中增加右键菜单
    • 注册Action
    • 当点击菜单/按钮，Action执行发送消息到宿主页面服务端
    • 服务端发送消息到宿主页面前端，进而执行相关动作
    • 该方案优势：灵活
    • 弊端：链路挺长

方案2细节

fetch请求，node下也内置fetch对象，因此fetch方案也可以让extension在code-server还是vsc均支持。但fetch方案并不双通。

相关问题