如何在另一个 HTML 页面中包含一个 HTML 页面答案

【问题标题】：How can I include a HTML page in another HTML page如何在另一个 HTML 页面中包含一个 HTML 页面
【发布时间】：2019-07-03 14:13:49
【问题描述】：

我正在开发一个网站，用 D3.js 创建不同的图形

我有一个名为“index.html”的主页，其中有一段介绍文字。我有一个名为“GenrePie.html”的第二个页面，其中有一个饼图。

我想把“GenrePie.html”页面放到我的“index.html”页面中。

在几个论坛上，我找到了一种方法，但它对我不起作用：


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script>
        $(function(){
            $("#includedPieContent").load("GenrePie.html");
        });
    </script>

这是我的 index.html ：

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Maxes</title>


</head>
<body>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 id="title">Forever</h1>
        <p  id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
    </div>
</div>
<div class="principal">
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. 
</p>

</div>

</body>
</html>

我想把我的饼图放在第二段之后

提前谢谢你

【问题讨论】：

标签： html include

【解决方案1】：

您可以使用适合您的 embed 或 iframe，

我会推荐 embed，因为它看起来很干净。

快速演示： https://jsfiddle.net/vikas_saini/kupb0Lh9/5/

<div>
    <h1>SOME TEXT</h1>

    <embed src="https://example.com/" style="width:500px; height: 300px;">

    <iframe src="https://example.com/">
      <p>Your browser does not support iframes.</p>
    </iframe>

</div>

你的代码示例

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>Maxes</title>


</head>
<body>
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <h1 id="title">Forever</h1>
        <p  id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
    </div>
</div>
<div class="principal">
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. 
</p>
  <embed src="GenrePie.html" style="width:500px; height: 300px;">
</div>

</body>
</html>

如果这对你不起作用，请告诉我。

【讨论】：