如何将 svelte app 封装在 svelte app 的 iframe 中？

Question

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

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

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

还有其他想法吗？

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

1 - 在没有媒体查询和 vh/vw 单元的情况下调整 CSS（很难，有时可能是不可能的）

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

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

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

希望更清楚

Answer 1

您可以只选择目标为 iframe 正文。更多关于如何创建苗条组件的信息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);

Answer 2

如果我没听错的话。

1. 打包成一个可滚动的 div 怎么样？
2. 您的苗条应用程序被打包到一个 bundle.js 中。将 index.html 重命名为 sth.html，然后在新的 index.html 中 iframe src=sth.html