iframe - 如何将 svelte 应用程序封装在 svelte 应用程序的 iframe 中？

Question

针对移动设备的精简应用程序将在线模拟(移动绘图，其中呈现实际的应用程序)。由于媒体查询(这不起作用，因为应用程序是整个页面而不仅仅是移动绘图内容)，我最好的解决方案是应用程序应该位于 iframe 内。

有没有一种方法可以做到这一点，而无需实际编写另一个封装前者的精简应用程序？因为它将把所有东西捆绑在一起。我可以处理工兵设置来控制它，但对我来说似乎有点困惑。正如扭曲 CSS 来模拟媒体查询一样，在发布到生产目标时将所有内容切换回来。

然后我将运行两个不同的 sapper CLI 开发服务器、package.json、git 存储库等。还必须考虑部署，涉及两个 public/dist 文件夹及其路径/路由。

还有其他想法吗？

编辑:更清楚地说，我基本上有 4 个选择:

1 - 在没有媒体查询和 vh/vw 单元的情况下调整 CSS(非常困难，有时甚至不可能)

2 - 模拟器作为组件(但 iframe src 指向哪里？)

3 - 设置两个汇总输出，也许应用程序是一个可水合的组件。 iframe 将指向输出 2(如何协调？index1 与 index2？具有应用程序 2 个渲染部分的同一公共(public)文件夹)

4 - 两个独立的应用程序，整个事情(如何部署？两个网络服务器可以做到，但理想情况下它应该成为一个最终应用程序)

希望更清楚

Answer 1

您只需选择 iframe 主体即可使用。有关如何创建 Svelte 组件的更多信息 https://svelte.dev/docs#Client-side_component_API

import App from './App.svelte';

const iframe = document.createElement("iframe");
iframe.onload = (ev) => {
    const app = new App({
        target: iframe.contentWindow.document.body,
        props: {
            name: 'world'
        }
    });
};
document.body.append(iframe);