温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - How can I include a HTML page in another HTML page
html include

其他 - 如何在另一个HTML页面中包含一个HTML页面

发布于 2020-03-27 11:00:27

我正在开发一个网站,使用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>

我想将饼图放在第二段之后

先感谢您

查看更多

查看更多

提问者
Daniela
被浏览
31
Vikas Saini 2019-07-03 22:59

您可以使用适合自己的embed或iframe,

我建议嵌入,因为它看起来很干净。

快速演示: 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>

让我知道这是否对您不起作用。