如何不使用iFrame或AJAX将完整HTML页面导入到另一页面？

云上老周

2026-5-25

用Web Components的HTML Imports嵌入外部内容（替代iFrame/AJAX）

嘿，首先得给你提个关键的小提醒：HTML Imports这个特性已经被主流浏览器废弃啦——Chrome在73版本之后就移除了支持，现在生产环境用这个方案风险很高。不过先拆解下你写的代码逻辑，再给你推荐靠谱的替代方案~

你的代码逻辑解析

你这段代码的思路是完全通顺的：

在页面<head>里通过<link rel="import" href="mysite.html">标记要引入的目标页面
用JS选中这个<link>元素，通过它的import属性拿到导入的完整文档内容
把导入的内容克隆一份，追加到当前页面的<body>里

对应的代码块我帮你格式化好了：

<html>
  <head>
    <link rel="import" href="mysite.html">
  </head>
  <body>
    <script>
      var link = document.querySelector('link[rel="import"]');
      var content = link.import;
      document.body.appendChild(content.cloneNode(true));
    </script>
  </body>
</html>

靠谱替代方案：Fetch API（替代HTML Imports）

既然HTML Imports已经凉了，推荐你用Fetch API来实现相同需求——它是AJAX的现代替代，语法更简洁，兼容性拉满（所有现代浏览器都支持）：

fetch('mysite.html')
  .then(response => {
    if (!response.ok) throw new Error('请求失败');
    return response.text();
  })
  .then(htmlContent => {
    // 把获取到的HTML插入到页面中
    document.body.insertAdjacentHTML('beforeend', htmlContent);
  })
  .catch(error => console.error('加载内容出错:', error));

这个方案既避免了iframe的沙盒限制，也不像传统AJAX那样代码冗余，逻辑清晰易懂。