Question

针对移动设备的苗条应用程序将在线模拟。由于存在媒体查询，我最好的解决方案是该应用程序应位于iframe中。

有没有一种方法，而无需实际编写另一个封装前者的精巧应用程序呢？因为它将所有东西捆绑在一起。我可以使用设置工具来控制它，但是对我来说似乎有点混乱。就像扭曲CSS来模拟媒体查询一样，当发布到生产目标时，它们会全部切换回去。

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

还有其他想法吗？

Answer 1

如果我说对了。

如何打包到可滚动的div中？
您的苗条应用程序打包到bundle.js中。将index.html重命名为sth.html，然后在新的index.html中将iframe src = sth.html重命名。

Answer 2

您可以仅选择目标为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);

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

2 个答案: