Как я могу включить страницу HTML в другую страницу HTML - PullRequest
0 голосов
/ 03 июля 2019

Я занимаюсь разработкой веб-сайта, на котором я создаю различную графику с помощью 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 Ответ

1 голос
/ 03 июля 2019

Вы можете использовать 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>

Дайте мне знать, если это не сработало для вас.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...