Javascript 将完整页面作为iframe嵌入子目录（iframe中的相对路径不起作用）

我有以下情况：我想提供一个工作概述页面，其中包括学生提交的小静态html/css页面。 他们都有自己的资产，css和js文件

一页可能是这样的

/page1
    index.html
    style.css
    /assets/img.jpg

index.html以相对方式链接到相应的文件： 例如：

我想建立一个概览页面，允许浏览所有这些小页面

我的想法是用这种结构建造一些东西：

overview.html
/submissions
    /page1
        index.html
        style.css
        /assets
            img.jpg
    /page2
        index.html
        main.css
        /assets
            /icons
                img.png
    /page3
        ...
        

在my overview.html中，我想构建一种滑块（两个按钮（next/prev submission），用于加载特定页面的内容（

page1/page2/…

）

为此，我打算使用JavaScript动态创建

iframe

s，并加载提交页面的内容

到目前为止还不错。我这样做了，但是当我加载一个iframe时，比如：

function showPage() {
  const iframe = document.createElement('iframe');
  iframe.setAttribute('src', './submissions/page1/index.html');
  document.body.appendChild(iframe);
}

这将加载正确的html，但是

page1/index.html

请求的路径从错误的相对点开始

当

page1/index.html

请求像

src=“./style.css”

这样的css文件时，我希望它会相对于这个html搜索它

我打电话的时候

overview.html

->将iframe嵌入

page1/index.html

它现在将请求相对于my overview.html：

overview.html
style.css <--------- iframe tries to load this file with `./style.css`

/submissions
    /page1
        index.html
        style.css <----------- instead of this one
        /assets
            img.jpg
    /page2
        index.html
        main.css
        /assets
            /icons
                img.png
    /page3
        ...
        

overview.html
样式表