javascript - 如何在 Web 应用中实现实时预览功能？

Question

基本上，我们使用无头 CMS 来编辑网站 A 上的内容。我们正在基于无头 CMS API（称为网站 CMS）构建自己的 CMS UI。

现在，我们在网站 CMS 中有这个页面，您可以在其中编辑左侧面板上的内容并在右侧面板（移动视图）上预览网站 A。

我以前没有做过这样的事情，我想知道实现这一点的最佳方法是什么，以及是否有任何库可以帮助实现此功能。

一些想法：

1. 在网站 CMS 中嵌入网站 A，在左侧面板上所做的任何更改基本上只会刷新网站 A（它只是嵌入到页面中）。
2. 将网站 A 重新创建为网站 CMS 中的页面并调用相同的 API，以便更改都发生在网站 CMS 的网站 A 和实际的网站 A 上。（虽然我不认为这会更有益，并将创建 2 个单独的代码库对于完全相同的页面）。
3. 其他？？？

我们使用的主要框架是这个 CMS UI 的 ReactJs。

Answer 1

您可以在 CMS 和网站 A 之间建立通信链接以交换数据。

选项

1. 您可以使用 iframe 将网站 A 嵌入到网站 CMS 中，然后您可以使用postMessage在 CMS 和网站 A 之间交换数据。
2. 或者，您可以使用 WebSockets，其中网站 A 将监听 CMS 左侧面板所做的更改。

Answer 2

选项 2 是我会做的，不一定是重复的。

您希望用户能够在不发布更改的情况下预览更改。因此，移植真实网站与该目标不兼容。

代码重复可能是最小的。它将共享大部分相同的代码，并且传播速度也会更快。