Warm tip: This article is reproduced from stackoverflow.com, please click
html include

How can I include a HTML page in another HTML page

发布于 2020-03-27 10:21:53

I am developing a website where I create different graphics with D3.js

I have a main page called "index.html" where I have a piece of text for the introduction. I have a second page called "GenrePie.html" which has a pie chart.

I want to put the "GenrePie.html" page in my "index.html" page.

On several forums I found a way to do it but it doesn't work for me :


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

this is my 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>

I would like to put my pie chart after the second paragraph

Thank you in advance

Questioner
Daniela
Viewed
33
分享
Vikas Saini 2019-07-03 22:59

You can use embed or iframe whichever suits you,

I will recommend embed as its looks clean.

Quick Demo : 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>

Your Code Example 

<!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>

Let me know if this did not work for you.

Related issues

1
CSS selector of inner elements
2
How to define a font size that scales with browser zoom level?
3
How can I submit 's data without in HTML?
4
F# count all present links on html website
5
p tag within a div affecting the adjacent div's position
6
Dropdown Nav Menu Appears on Right and Stacked Horizontally
7
Javascript website security
8
Why is my getting cut off when resizing window?
9
How to get bootstrap to take whole screen
10
HTML JS