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

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

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

Ответы

Ответ 1

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

<!--#include virtual="/footer.html" -->

Ответ 2

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

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

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

Ответ 3

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

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

Подробнее в jQuery Docs

Если вы хотите использовать IFrames, начните с Wikipedia на 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>

Ответ 4

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

  <link rel="import" href="/path/to/file.html">

Ответ 5

<iframe src="page.html"></iframe>

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

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

Ответ 6

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

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

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

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

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

<p class="inc:footer.htm"></p>

Ответ 7

<html>
<head>
<title>example</title>
    <script> 
   $(function(){
       $('#filename').load("htmlfile.html");
   });
    </script>
</head>
<body>
    <div id="filename">
    </div>
</body>

Ответ 8

$.get("file.html", function(data){
    $("#div").html(data);
});

Ответ 9

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

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

Что все!

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

Ответ 10

Лучшее, что у меня есть: Включите в свой 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>

Ответ 11

Также не забудьте проверить, как использовать Angular включает (используя AngularJS). Это довольно прямолинейно...

<body ng-app="">
  <div ng-include="'myFile.htm'"></div>
</body>

Ответ 12

Если вы используете NGINX поверх Linux и хотите получить чистый bash/html, вы можете добавить маску в свой шаблон и передать запросы на использование команды sed для замены с помощью выражения regullar.

В любом случае я предпочел бы иметь bash script, который берет из папки шаблонов и генерирует окончательный HTML.

Ответ 14

подтвержденный roadkill, создайте файл .htaccess в корневом каталоге веб-страниц одной строкой, которая позволяет вам добавить php-код в файл .html.

Приложение AddType/x-httpd-php.html