如何在 web-app 中实现设备预览答案

【问题标题】：how to implement device preview in web-app如何在 web-app 中实现设备预览
【发布时间】：2020-07-03 23:06:28
【问题描述】：

我正在创建类似于snack.exop.io 编辑器。就像他们如何在右侧显示手机预览？就像我们写了一些东西，它会预览它在设备中的样子，我什至不知道这个概念叫什么，真正要搜索什么。我想创建类似于这张图片的东西。

如何在网络应用程序中添加此模拟器功能。

【问题讨论】：

类似于虚拟网络计算的东西。

标签： javascript html reactjs flutter

【解决方案1】：

https://snack.exop.io 使用 https://appetize.io 有定价：https://appetize.io/pricing，也可以免费试用。

应用程序本身在后端运行移动模拟器，并将屏幕截图发送到前端，在 Canvas 中呈现。更多你可以在这里阅读https://news.ycombinator.com/item?id=8487813

【讨论】：

【解决方案2】：

snack.expo.io 使用 iFrame，可能使用 JavaScript 进行了修改。创建一个不带src 的iFrame（适用跨域策略），并使用此代码对其进行修改。 This W3Schools tutorial 展示了如何使用 contentWindow 属性修改 iFrame 的样式。但是，我找不到用它来修改内容本身的方法，但我找到了 this Stack Overflow question 这应该会有所帮助。

function loadFrame() {
  x = document.getElementById('iframe').contentWindow;
  x.document.write("<html><body>Put content here</body></html>");
}

但是，请注意您允许用户修改的内容，因为document.write 可以是 eval 的一种形式。确保始终对用户的文本进行转义。

无论如何，这里是a fiddle。

【讨论】：