使用 HTML 导入在 DIV 中加载整个 HTML 页面答案

【问题标题】：Using HTML import to load entire HTML page inside a DIV使用 HTML 导入在 DIV 中加载整个 HTML 页面
【发布时间】：2020-08-11 21:20:29
【问题描述】：

我们有一个 HTML 页面，它充当多个应用程序的网关。该网站有几个按钮和一个 IFRAME。单击按钮后，我们会在 IFRMAE 中加载其他 HTML 页面。所有这一切都很好。但是我们想利用 HTML 导入/Web 组件同时支持 IE 11 来实现相同的目的。我想本地化我们正在导入的这个 HTML 页面的范围，这样它就不会干扰现有的应用程序。

我们怎样才能做到这一点？这种方法有什么缺点吗？

这是我们目前拥有的。

Index.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />

    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"
        integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
    <script>



        $(document).ready(function () {
            $("#btnAbout").click(function () {
                document.getElementById('iframe').src = "about.html";
            });

            $("#btnContact").click(function () { $("#iframe").attr("src", "contact.html") });

            $("#btnApple").click(function () {
                document.getElementById('iframe').src = "https://www.Apple.com/";
            });
        });

    </script>
    <style>
        body {
            height: 96vh;
            padding: 0;
        }
    </style>

</head>

<body style="border: 1px;border-style: dashed; color: brown;">
    <div>
        <input type="button" value="Yahoo" id="btnAbout" />
        <input type="button" value="MS" id="btnContact" />
        <input type="button" value="Apple" id="btnApple" />

    </div>
    <iframe id="iframe" width="100%" height="96%"></iframe>

</body>

</html>

关于.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title> About</title>
</head>

<body>
    <div style="border-style: dotted; color: crimson; height: 1000px;">
        this is a div
    </div>

</body>

</html>

User.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
</head>

<body>

  <div>
      user page
  </div>

</body>

</html>

联系方式.html

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
</head>
<body>
  <div>
      this is content page
  </div>

</body>

</html>

【问题讨论】：

我认为您应该使用可以创建 SPA 的框架之一，例如 Vue.js、React、Angular 等。
我认为不需要 SPA 框架。我要做的就是在我的页面中加载另一个 HTML 页面。
只需使用友好的 iframe（无源属性，只需在框架中包装），无需担心范围。也许先阅读this article。这就是广告几乎无处不在的嵌入方式。

标签： javascript html jquery web-component shadow-dom

【解决方案1】：

最大的缺点是大多数主流浏览器不再支持 HTML 导入。

来源：https://developer.mozilla.org/en-US/docs/Web/Web_Components/HTML_Imports

替代和支持的解决方案如下：

使用 iFrame 嵌入内容
使用 ajax 加载内容
使用php包含

以上所有内容都可以在 IE11 上正常工作，但我会完全放弃对 IE11 的支持。

【讨论】：