使用Web Component替代iframe时的资源路径错误问题解决咨询

嗨，我来帮你搞定这个资源路径的问题～

你遇到的核心问题其实很好理解：当你把远程HTML直接塞进shadow DOM的innerHTML时，里面的相对路径资源（比如CSS、图片、脚本）会默认以当前打开页面的URL为基准去加载，而不是以你fetch的那个HTML文件的URL为基准——这和iframe的自动路径隔离行为完全不一样，iframe会把嵌入页面的URL作为所有资源的根路径。

给你几个实用的解决办法：

• 最省心的方案：给HTML添加标签指定资源基准
  这是最简单有效的办法，在把HTML插入shadow DOM之前，给它头部加一个<base>标签，把href设为你要嵌入的HTML文件所在的目录路径。这样里面所有相对路径的资源都会自动以这个路径为基准加载。
  你可以把你的Web Component代码改成这样：

  class EmbeddedWebview extends HTMLElement {
    connectedCallback() {
      const src = this.getAttribute('src');
      // 把相对路径转成完整的URL，避免路径歧义
      const fullSrcUrl = new URL(src, window.location.href);
      fetch(fullSrcUrl)
        .then(response => response.text())
        .then(html => {
          const shadow = this.attachShadow({ mode: 'closed' });
          // 提取HTML文件所在的目录路径作为base的href
          const basePath = fullSrcUrl.origin + fullSrcUrl.pathname.replace(/[^/]+$/, '');
          // 把base标签插入到HTML最前面
          const baseHtml = `<base href="${basePath}">${html}`;
          shadow.innerHTML = baseHtml;
        });
    }
  }
  window.customElements.define('embedded-webview', EmbeddedWebview);
  

  这里fullSrcUrl.pathname.replace(/[^/]+$/, '')的作用是把HTML文件名去掉，只保留它所在的目录路径，比如你fetch的是a/b/index.html，处理后就会得到a/b/，这样里面的CSS、图片就会正确从这个目录加载了。

• 备选方案：手动替换所有资源的相对路径
  如果你不想用<base>标签，可以遍历HTML里所有带资源路径的标签（比如<link>、<img>、<script>），把它们的相对路径都转换成基于当前页面的绝对路径。不过这个方法比较繁琐，要处理各种不同的标签和属性，除非你有特殊需求，不然不推荐。

• 兜底方案：再试试iframe的适配（如果可行的话）
  你一开始说iOS里iframe不好用，不过可以检查下是不是特定版本的问题，或者试试给iframe添加sandbox属性来适配——当然如果这个路子走不通，还是用前面的Web Component方案更靠谱。

另外要注意，这些方案都要求你fetch的HTML文件是同源的，不然会遇到跨域问题（不过你原来的代码能正常fetch，应该已经满足同源要求了）。

备注：内容来源于stack exchange，提问作者user1920276