如何使用 IFrame 在容器前端的 url 中包含微前端的 url？

问题描述

在我的工作中，我被要求做一个系统，在该系统中我们可以连接到部署在我们的云服务 (Azure) 中的不同独立前端。这个独立的前端没有合适的域。我们只想使用单个域“例如：https://container.com”。对独立前端的访问将通过扩展 url 来实现。例如：

http://container.com/testapp1 向我展示了 testapp1。 ( https://testapp1.azurewebsites.net ) http://container.com/testapp2 向我展示了 testapp2。 ( https://testapp2.azurewebsites.net )

我的想法是创建一个简单的 express 服务器和一个 html 文件。（server.js 和 main.html）快递服务器显示以下 html 站点：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Container</title>
</head>
<style>
    html {
        width:100%;
        height:100%;
    }
    body {
        width:100%;
        height:100%;
        margin:0px;
    }
    iframe {
        border:0px;
        width:100%;
        height:100%;
    }
</style>
<body>
    <iframe id="container-id"></iframe>
    <script type="text/javascript">
        const routes={
            "/":"","/testapp1":"https://testapp1.azurewebsites.net","/testapp2":"https://testapp1.azurewebsites.net"
        }
        const container = document.querySelector("#container-id");
        container.src = routes[window.location.pathname];
    </script>
</body>
</html>

好得令人难以置信。这种方法的问题在于每个应用程序都有自己的 url 配置。 testapp1 和 testapp2 有 "/login","/projects","/projects/:id"，它的缺点是，每当我重新加载页面时，它都会将我直接重定向到 /login。我猜这是因为 testapp1 的 url 没有保存，默认情况下它直接带我到“/”。不过我想留在/projects/:id。

我一直在寻找其他选项（不一定非要使用 IFrame），但我还没有找到好的替代方法。

这就是为什么我问是否可以使用 IFrame 扩展 url？例如https://container.com/testapp1/login，然后转到/projects/:id。如果这是不可能的，还有其他原因要扩展 url 吗？

非常感谢您的时间！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）