使用 HTML 導入在 DIV 中加載整個 HTML 頁面

Question

我們有一個 HTML 頁面，它充當多個應用程序的網關。 該網站有幾個按鈕和一個 IFRAME。 單擊按鈕后，我們會在 IFRMAE 中加載其他 HTML 頁面。 所有這一切都很好。 但是我們希望在支持 IE 11 的同時利用 HTML 導入/Web 組件來實現相同的目的。 我想本地化我們正在導入的這個 HTML 頁面的 scope，這樣它就不會干擾現有的應用程序。

我們怎樣才能做到這一點？ 這種方法有什么缺點嗎。

這是我們目前所擁有的。

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

用戶.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>

Answer 1

最大的缺點是大多數主流瀏覽器不再支持 HTML 導入。

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

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

使用 iFrame 嵌入內容
使用 ajax 加載內容
使用 php 包括

以上所有內容都可以在 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