Как включить HTML-страницу в другую HTML-страницу без фрейма / фрейма?
Я хочу включить страницу HTML внутри страницы HTML. Является ли это возможным?
Я не хочу делать это в PHP, я знаю, что в PHP мы можем использовать include для этой ситуации, как я могу добиться того же чисто в HTML без использования iframe а также frame концепция?
15 ответов
Если вы просто пытаетесь вставить свой собственный HTML-код из другого файла и считаете, что включение на стороне сервера является "чистым HTML" (потому что оно выглядит как комментарий HTML и не использует что-то "грязное", например PHP)):
<!--#include virtual="/footer.html" -->
Вы можете использовать элемент объекта
<object type="text/html" data="urltofile.html"></object>
или на локальном сервере AJAX может вернуть строку HTML (responseText), которую вы можете использовать для document.write нового окна, или отредактировать теги head и body и добавить остальное в div или другой элемент блока в текущая страница.
Если вы имеете в виду сторону клиента, то вам придется использовать 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>
Вы можете использовать HTML5 для этого:
<link rel="import" href="/path/to/file.html">
<iframe src="page.html"></iframe>
Вам нужно будет добавить немного стиля к этому iframe. Вы можете указать ширину, высоту, и если вы хотите, чтобы она выглядела как часть оригинальной страницы, включите frameborder="0",
Другого способа сделать это в чистом HTML нет. Это то, для чего они были созданы, это все равно что сказать, что я хочу жарить яйцо без яйца.
<html>
<head>
<title>example</title>
<script>
$(function(){
$('#filename').load("htmlfile.html");
});
</script>
</head>
<body>
<div id="filename">
</div>
</body>
Если вы хотите использовать jquery, есть удобный плагин jquery под названием "inc".
Я часто использую его для прототипирования веб-сайтов, где я просто хочу представить клиенту статический HTML без внутреннего слоя, который можно быстро создать / отредактировать / улучшить / повторно представить
Например, такие вещи, как меню и нижний колонтитул, должны отображаться на каждой странице, но вы не хотите в конечном итоге использовать команду "копировать и вставить"
Вы можете включить фрагмент страницы следующим образом
<p class="inc:footer.htm"></p>
Лучшее, что я получил: включить в свой файл 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>Вы можете сказать, что это с PHP, но на самом деле он имеет только одну команду PHP, все остальные файлы просто *.html.
- У вас должен быть файл с именем.htaccess в каталоге /public_html вашего веб-сервера или в другом каталоге, где будет находиться ваш html-файл, и вы будете обрабатывать одну команду внутри него.
- Если у вас его нет (или он может быть скрыт (вы должны проверить этот список каталогов, проверив каталог на наличие скрытых файлов)), вы можете создать его с помощью блокнота и просто ввести в нем одну строку:
AddType application/x-httpd-php .html - Сохраните этот файл с именем.htaccess и загрузите его в главный каталог сервера.
- В вашем html-файле везде, где вы хотите, чтобы появился внешний файл "meniu.html, добавьте команду te:
<?php include("meniu.html"); ?>,
Это все!
Замечание: все команды как <? ...> будут рассматриваться как исполняемые файлы php, так что если у вашего html есть вопросительные знаки, то у вас могут возникнуть некоторые проблемы.
В 2022 году
В HTML без iframe
<div id="display" style="width: 100%;float: left;"></div>
<script>
function load_anotherpage() {
document.getElementById("display").innerHTML =
'<embed type="text/html" src="https://libcon.in/" width="100%" height="800" >';
}
load_anotherpage();
</script>
хотите больше, тогда используйте эту ссылку
Также обязательно ознакомьтесь с тем, как использовать Angular include (используя AngularJS). Это довольно просто...
<body ng-app="">
<div ng-include="'myFile.htm'"></div>
</body>
Если вы используете NGINX поверх linux и хотите использовать чистый bash/html, вы можете добавить маску в свой шаблон и направить запросы на использование команды sed для замены с помощью регулярного выражения.
В любом случае, я бы предпочел иметь bash-скрипт, который берет из папки шаблонов и генерирует окончательный HTML.
Подтвердив Roadkill, создайте файл.htaccess в корне сети с одной строкой, которая позволяет добавлять код php в файл.html.
Приложение AddType /x-httpd-php .html
Лучшее решение от nginx: http://sysoev.ru/nginx/docs/http/ngx_http_ssi_module.html