由Blob生成的iframe页面如何引用父页面路径下的资源？

我通过以下代码从宿主页面生成iframe内容：

parent.App.Plugins.GetInstance(obj).Compile(obj.content).then((html) => {
    var blob = new Blob([html],{type:"text/html"});
    var url = URL.createObjectURL(blob);
    window.location.href = url;
});

但生成的HTML里，外部链接（比如https://开头的）能正常加载，服务器本地的相对路径资源（比如js/main.js、/images/some-file.jpg）却无法加载。想问这种情况下，该用什么相对URL才能加载宿主页面路径下的内容？

示例HTML内容：

<html>
<head>
  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
  <script src="./modules/loader.js" type="module"></script>
  <script src="js/main.js"></script>
</head>
<body>
  <img src="https://images.unsplash.com/photo-1472740378865-80aab8e73251">
  <img src="/images/some-file.jpg">
</body>
</html>

原因 #

URL.createObjectURL(blob)生成的是blob:协议的URL，它的基准路径和宿主页面完全无关，所以HTML里的相对路径会基于这个blob:URL解析，自然找不到宿主服务器上的资源。

解决方案 #

1. 给资源加上宿主页面的绝对路径 #

直接把相对路径拼接上宿主的域名（或完整根路径），比如宿主页面是https://example.com/app/，那js/main.js改成https://example.com/app/js/main.js，/images/some-file.jpg改成https://example.com/images/some-file.jpg。

你可以在生成HTML时，通过window.location.origin或window.location.href动态获取宿主的基础路径，批量替换资源路径。

2. 在Blob的HTML中添加<base>标签 #

在HTML的<head>里插入<base>标签，指定宿主页面的基础URL，这样所有相对路径都会自动基于这个URL解析，不用逐个修改资源链接。

比如修改后的HTML：

<html>
<head>
  <base href="https://example.com/app/"> <!-- 替换成你的宿主页面基础路径 -->
  <script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
  <script src="./modules/loader.js" type="module"></script>
  <script src="js/main.js"></script>
</head>
<body>
  <img src="https://images.unsplash.com/photo-1472740378865-80aab8e73251">
  <img src="/images/some-file.jpg">
</body>
</html>

也可以在JS代码里动态插入这个标签：

parent.App.Plugins.GetInstance(obj).Compile(obj.content).then((html) => {
    // 获取宿主页面的基础路径，这里根据实际情况调整
    const hostBaseUrl = window.location.origin + '/app/';
    // 在head开头插入base标签
    const modifiedHtml = html.replace('<head>', `<head><base href="${hostBaseUrl}">`);
    var blob = new Blob([modifiedHtml],{type:"text/html"});
    var url = URL.createObjectURL(blob);
    window.location.href = url;
});

内容的提问来源于stack exchange，提问作者frumbert