javascript - 如何在 Web 应用中实现实时预览功能?
问题描述
基本上,我们使用无头 CMS 来编辑网站 A 上的内容。我们正在基于无头 CMS API(称为网站 CMS)构建自己的 CMS UI。
现在,我们在网站 CMS 中有这个页面,您可以在其中编辑左侧面板上的内容并在右侧面板(移动视图)上预览网站 A。
我以前没有做过这样的事情,我想知道实现这一点的最佳方法是什么,以及是否有任何库可以帮助实现此功能。
一些想法:
- 在网站 CMS 中嵌入网站 A,在左侧面板上所做的任何更改基本上只会刷新网站 A(它只是嵌入到页面中)。
- 将网站 A 重新创建为网站 CMS 中的页面并调用相同的 API,以便更改都发生在网站 CMS 的网站 A 和实际的网站 A 上。(虽然我不认为这会更有益,并将创建 2 个单独的代码库对于完全相同的页面)。
- 其他???
我们使用的主要框架是这个 CMS UI 的 ReactJs。
解决方案
您可以在 CMS 和网站 A 之间建立通信链接以交换数据。
选项
- 您可以使用 iframe 将网站 A 嵌入到网站 CMS 中,然后您可以使用postMessage在 CMS 和网站 A 之间交换数据。
- 或者,您可以使用 WebSockets,其中网站 A 将监听 CMS 左侧面板所做的更改。
推荐阅读
- python - 任务管理器不想在用户未登录时执行任务
- kubernetes - Ecplise hono 1.0.0 需要哪个 k8s 版本?
- .net - 如何从 WebView2 中的 ExecuteScript 获取同步返回
- android - 在片段中实例化 WorkManager 时 requireActivity() 或获取应用程序上下文
- java - 在一个分支搜索 Game Hive 中 Spider 的实现后,递归停止
- kotlin - 如何简化 Kotlin 中的谓词链
- haskell - 如何在 Haskell Stack+Nix 项目中添加 Nix 项目作为依赖项
- java - 显示整数 (>0) 是否可以被 2 和 3 整除
- elasticsearch - 具有部分边缘 ngram 完成的数组字段的 Elasticsearch 搜索建议
- html - 如何在 ::after 上实现全高边框(父元素的)