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

Question

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

有没有一种方法可以做到这一点，而不是实际编写另一个封装前者的svelte应用程序？因为它会把所有的东西捆绑在一起。我可以处理sapper设置来控制这一点，但它对我来说似乎有点混乱。就像扭曲CSS来模拟媒体查询一样，在发布到生产目标时切换所有内容。

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

还有其他想法吗？

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

1-在没有媒体查询和vh/vw单元的情况下自适应CSS (很难，有时可能是不可能的)

2-仿真器作为组件(但是iframe src会指向哪里？)

3-设置两个汇总输出，也许app是一个水合组件。Iframe将指向输出2(如何协调？index1 vs index2？同一公用文件夹中包含应用程序的两个渲染部分)

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

希望它是更清晰的

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);

Answer 2

如果我没弄错的话。

1. 打包成一个可滚动的div怎么样？
2. 你的轻薄的应用被打包成一个bundle.js。在新的index.html

中将index.html重命名为sth.html，然后重命名为iframe src=sth.html