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

Question

We have a HTML page that acts as gateway to multiple applications.我们有一个 HTML 页面，它充当多个应用程序的网关。 The site has few buttons and an IFRAME.该网站有几个按钮和一个 IFRAME。 On click of button, we load other HTML pages inside the IFRMAE.单击按钮后，我们会在 IFRMAE 中加载其他 HTML 页面。 All this is working fine.所有这一切都很好。 But we want to utilize HTML import/web components while supporting IE 11 to achieve same.但是我们希望在支持 IE 11 的同时利用 HTML 导入/Web 组件来实现相同的目的。 I want to localize the scope of this HTML page we are importing so that it does not interfere with existing application.我想本地化我们正在导入的这个 HTML 页面的 scope，这样它就不会干扰现有的应用程序。

How can we achieve this?我们怎样才能做到这一点？ Are there any downside to this approach.这种方法有什么缺点吗。

This what we currently have.这是我们目前所拥有的。

Index.html索引.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>

About.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用户.html

<!DOCTYPE html>
<html>

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

<body>

  <div>
      user page
  </div>

</body>

</html>

Contact.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>

Answer 1

The biggest downside is that most major browsers no longer support HTML imports.最大的缺点是大多数主流浏览器不再支持 HTML 导入。

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

Alternative and supported solutions are as follows:替代和支持的解决方案如下：

embed content using iFrames使用 iFrame 嵌入内容
load content using ajax使用 ajax 加载内容
use php includes使用 php 包括

All of the above will work just fine with IE11, though I would dump IE11 support altogether.以上所有内容都可以在 IE11 上正常工作，尽管我会完全放弃对 IE11 的支持。

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

问题描述

1 个解决方案

解决方案1
0 2020-04-28 09:41:28

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

问题描述

1 个解决方案

解决方案1 0 2020-04-28 09:41:28

解决方案1
0 2020-04-28 09:41:28