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

时间:2019-07-03 14:13:49

标签: html include

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

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

提前谢谢

1 个答案:

答案 0 :(得分:1)

您可以使用适合自己的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>

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

相关问题