Как включить HTML-страницу в другую HTML-страницу без фрейма / фрейма? - PullRequest
Новая
       44

Как включить HTML-страницу в другую HTML-страницу без фрейма / фрейма?

48 голосов
/ 24 марта 2009

Я хочу включить HTML-страницу в HTML-страницу. Является ли это возможным?

Я не хочу делать это в PHP, я знаю, что в PHP мы можем использовать include для этой ситуации, как я могу добиться того же в HTML без использования концепции iframe и frame

Ответы [ 14 ]

40 голосов
/ 27 марта 2009

Вы можете использовать элемент объекта 

<object type="text/html" data="urltofile.html"></object>

или на вашем локальном сервере AJAX может вернуть строку HTML (responseText), которую вы можете использовать для document.write нового окна, или отредактировать теги head и body и добавить остальное в div или другой блок элемент на текущей странице.

32 голосов
/ 24 марта 2009

Если вы просто пытаетесь вставить свой собственный HTML из другого файла и считаете, что Включение на стороне сервера является "чистым HTML" (потому что это выглядит как как комментарий HTML и не использует что-то «грязное», как PHP): 

<!--#include virtual="/footer.html" -->
26 голосов
/ 24 марта 2009

Если вы имеете в виду сторону клиента, вам придется использовать JavaScript или фреймы.
Простой способ начать, попробуйте jQuery 

$("#links").load("/Main_Page #jq-p-Getting-Started li");

Больше на jQuery Docs

Если вы хотите использовать IFrames, начните с Википедии на IFrames 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
        <title>Example</title>
  </head>
  <body>
        The material below comes from the website http://example.com/
        <iframe src="http://example.com/" height="200">
            Alternative text for browsers that do not understand IFrames.
        </iframe>
   </body>
</html>
22 голосов
/ 01 марта 2015

Вы можете использовать HTML5 для этого: 

  <link rel="import" href="/path/to/file.html">
11 голосов
/ 24 марта 2009 
<iframe src="page.html"></iframe>

Вам нужно будет добавить немного стиля в этот iframe. Вы можете указать ширину, высоту, и если вы хотите, чтобы она выглядела как часть оригинальной страницы, включите frameborder="0".

Нет другого способа сделать это в чистом HTML. Это то, для чего они были созданы, это все равно, что сказать, что я хочу жарить яйцо без яйца.

5 голосов
/ 25 мая 2015 
<html>
<head>
<title>example</title>
    <script> 
   $(function(){
       $('#filename').load("htmlfile.html");
   });
    </script>
</head>
<body>
    <div id="filename">
    </div>
</body>
5 голосов
/ 12 августа 2013

Если вы хотите использовать jquery, есть удобный плагин jquery под названием «inc».

Я часто использую его для создания прототипов сайтов, где я просто хочу представить клиенту статический HTML без внутреннего слоя, который можно быстро создать / отредактировать / улучшить / повторно представить

http://johannburkard.de/blog/programming/javascript/inc-a-super-tiny-client-side-include-javascript-jquery-plugin.html

Например, такие вещи, как меню и нижний колонтитул, должны отображаться на каждой странице, но вы не хотите заканчивать копированием-вставкой-Athon

Вы можете включить фрагмент страницы следующим образом 

<p class="inc:footer.htm"></p>
4 голосов
/ 06 ноября 2015 
$.get("file.html", function(data){
    $("#div").html(data);
});
3 голосов
/ 06 мая 2017

Лучшее, что у меня есть: Включите в свой файл js и для включения просмотров вы можете добавить таким образом 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Bootstrap</title>
    <!-- Your custom styles (optional) -->
    <link href="css/style_different.css" rel="stylesheet">
</head>

<body>
    <script src="https://www.w3schools.com/lib/w3data.js"></script>
    <div class="">
      <div w3-include-html="templates/header.html"></div>
      <div w3-include-html="templates/dashboard.html"></div>
      <div w3-include-html="templates/footer.html"></div>
    </div>
</body>
<script type="text/javascript">
    w3IncludeHTML();
</script>
</html>
1 голос
/ 21 августа 2011

Можно сказать, что это с PHP, но на самом деле он имеет только одну команду PHP, все остальные файлы просто * .html.

  1. У вас должен быть файл с именем .htaccess в каталоге / public_html вашего веб-сервера или в другом каталоге, где будет находиться ваш html-файл, и вы будете обрабатывать одну команду внутри него.
  2. Если у вас его нет (или он может быть скрыт (вы должны проверить этот список каталогов, проверив каталог на наличие скрытых файлов)), вы можете создать его с помощью блокнота и просто ввести в нем одну строку:
    AddType application/x-httpd-php .html
  3. Сохраните этот файл с именем .htaccess и загрузите его в главный каталог сервера.
  4. В вашем html-файле, где вы хотите, чтобы появился внешний файл "meniu.html, добавьте команду te: <?php include("meniu.html"); ?>.

Вот и все!

Примечание: все команды, такие как <? ...>, будут обрабатываться как исполняемые файлы php, поэтому, если у вашего html есть вопросительные знаки, у вас могут возникнуть некоторые проблемы.

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

Нет похожих вопросов

...