简单的一个import外部html文件,为什么报错了?

我从未搞过前端,非常菜。但这个问题困扰了我1周,实在没法,请教:
html页面有大量的代码是复用的,比如菜单、头部、底部等。我想把这些复用代码设置成单独的html文件,其他页面有需要时调用。
我不想用include,因为这个受限于iis与windows。
在网上抄了这么一段简单的代码,竟然执行不了,请教了:
在head中:

<link rel="import" href="left_sidebar.html"  id="left_sidebar"/>

在body中:

<script>
 document.write(left_sidebar.import.body.innerHTML);
</script>

结果报错:
Uncaught TypeError: Cannot read properties of undefined (reading 'body')
查资料2天了,无法解决请各位指教,不胜感激!!

可以吧,你试试
b1.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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1>我是b1</h1>
    <div id="page1"></div>

    <script>
        $("#page1").load("b2.html");
    </script>
</body>
</html>

b2.html

    <h1>
        我是b2
    </h1>

你看看是不是

在纯粹的HTML中实现你说的功能,我的认知是没有的。
本人只会ASP.NET,在ASP.NET中,有类似include的写法,叫母版功能,和你讲的需求一模一样,我觉得PHP和jsp也有类似的功能,你问问后端的同事,协作处理一下你的问题。
APS.NET的前端文件中用一对标记把需要的HTML代码包裹,然后在主体引用,不受任何服务器部署限制。