Поместите html в другой html [duplicate]
Это директивы синхронизации строк, которые позволяют gcc давать правильные сообщения об ошибках в файлах #include d. Другие препроцессоры (такие как yacc / bison) используют один и тот же механизм для связывания ошибок C с правильными строками в файле ввода .y.
28 ответов
На мой взгляд, лучшее решение использует jQuery:
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
Этот метод простое и чистое решение моей проблемы.
Документация jQuery .load() здесь здесь .
На данный момент нет прямого решения HTML для задачи. Даже HTML Imports (который постоянно в черновике ) не будет делать этого, потому что Import! = Include и в любом случае потребуется какая-то магия JS. Недавно я написал скрипт VanillaJS , который предназначен для включения HTML в HTML без каких-либо осложнений.
Просто поместите в свой a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
Это open-source и может дать представление (надеюсь)
-
1Связи только ответы не приветствуются. Вы должны опубликовать соответствующие данные, чтобы при изменении ссылки ответ не был потерян. – Stuart Siegler 1 May 2015 в 11:49
-
2
-
3Noooo! Не ответ на ссылку! Вот еще один ресурс, чтобы выполнить работу. Не пробовал, сам. Школы W3 – Cody 15 December 2017 в 06:13
Большинство решений работают, но у них есть проблема с jquery:
Проблема заключается в следующем коде $(document).ready(function () { alert($("#includedContent").text()); }: ничего не предупреждает, а не предупреждает о включении содержимого.
Я пишу ниже код , в моем решении вы можете получить доступ к включенному контенту в функцию $(document).ready:
(Ключ загружается включенным содержимым синхронно).
index.htm:
<html>
<head>
<script src="jquery.js"></script>
<script>
(function ($) {
$.include = function (url) {
$.ajax({
url: url,
async: false,
success: function (result) {
document.write(result);
}
});
};
}(jQuery));
</script>
<script>
$(document).ready(function () {
alert($("#test").text());
});
</script>
</head>
<body>
<script>$.include("include.inc");</script>
</body>
</html>
include.inc:
<div id="test">
There is no issue between this solution and jquery.
</div>
-
1При использовании этого, а затем просмотра источника страницы из браузера вы видите только скрипт. Разве это не влияет на способность поисковых систем анализировать ваш сайт, в конечном итоге уничтожая любые усилия SEO? – hmcclungiii 7 October 2014 в 15:56
-
2
-
3
Вы можете сделать это с помощью библиотеки JavaScript jQuery следующим образом:
HTML:
<div class="banner" title="banner.html"></div>
JS:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
Обратите внимание, что banner.html должны находиться в том же домене, что и ваши другие страницы, в противном случае ваши веб-страницы откажутся от файла banner.html из-за политик перекрестного источника ресурсов .
Также обратите внимание что если вы загрузите свой контент с помощью JavaScript, Google не сможет его индексировать, поэтому это не совсем хороший метод для SEO-причин.
Простое решение с php:
<?php
readfile("yourpath/yourpage.html");
?>
, используя библиотеку импорта jquery u need
, я рекомендую вам использовать php
<?php
echo"<html>
<body>";
?>
<?php
include "b.html";
?>
<?php
echo" </body>
</html>";
?>
b.html
<div>hi this is ur file :3<div>
-
1
Я знаю, что это очень старое сообщение, поэтому некоторые методы тогда не были доступны. Но это мой очень простой подход к этому (основанный на ответе Лоло).
Он опирается на атрибуты data- * HTML5 и поэтому является очень общим в том, что использует каждую функцию jQuery для каждой функции. class matching "load-html" и использует свой соответствующий атрибут «источник данных» для загрузки содержимого:
<div class="container-fluid">
<div class="load-html" id="NavigationMenu" data-source="header.html"></div>
<div class="load-html" id="MainBody" data-source="body.html"></div>
<div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
$(".load-html").each(function () {
$(this).load(this.dataset.source);
});
});
</script>
Нет необходимости в скриптах.
<iframe src="/path/to/file.html" seamless></iframe>
Поскольку старые браузеры не поддерживают бесшовные, вы должны добавить некоторые css для исправления:
<iframe src="/path/to/file.html" seamless></iframe>
g2]
iframe[seamless] {
border: none;
}
Имейте в виду, что для браузеров, которые не поддерживают бесшовные, если вы нажмете ссылку в iframe, это сделает кадр отправится на этот URL-адрес, а не на все окно , Чтобы обойти это, чтобы все ссылки имели target="_parent", поддержка браузера «достаточно хороша».
-
1
-
2
-
3он, похоже, не применяет стили css с родительской страницы, например. – Randy 24 October 2014 в 22:48
-
4@ Randy Итак? Это можно было бы считать плюсом (особенно для контента, созданного пользователем). Вы можете легко включить файлы css снова в любом случае, не делая другого запроса из-за кэширования в любом случае. – bjb568 25 October 2014 в 00:24
-
5Похоже, что для этого работают
<object>,<embed>и<iframe>, но во всех трех случаях они создают отдельные документы с их собственными настройками и сценариями (iframe, в частности, включает уродливые границы и полосы прокрутки) и, например, любые ссылки по умолчанию открываются внутри них, а не на родительской странице (хотя это можно переопределить с помощью target = & quot; _parent & quot;). Из всех них iframe является единственным, у которого есть надежда стать более интегрированным с помощью атрибута HTML5seamless(упомянутый bjb568), но он еще не поддерживается хорошо: caniuse.com/#feat=iframe- бесшовные – waldyrious 25 October 2014 в 19:24 -
6Атрибут
seamlessбыл удален из черновика HTML, из которого он пришел. Не используйте его. – Mitja 28 March 2017 в 15:25
На основе ответа https://stackoverflow.com/a/31837264/4360308 Я реализовал эту функцию с помощью Nodejs (+ express + cheerio) следующим образом:
HTML (index.html)
<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>
JS
function includeComponents($) {
$('.include').each(function () {
var file = 'view/html/component/' + $(this).data('include') + '.html';
var dataComp = fs.readFileSync(file);
var htmlComp = dataComp.toString();
if ($(this).data('method') == "replace") {
$(this).replaceWith(htmlComp);
} else if ($(this).data('method') == "append") {
$(this).append(htmlComp);
}
})
}
function foo(){
fs.readFile('./view/html/index.html', function (err, data) {
if (err) throw err;
var html = data.toString();
var $ = cheerio.load(html);
includeComponents($);
...
}
}
append -> содержит содержимое в div
replace -> заменяет div
, вы можете легко добавить более поведение по той же схеме
После работы с содержимым html из некоторого файла необходимо включить: например, следующая строка будет содержать содержимое части__объекта.html в месте определения OBJECT.
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
Ссылка : http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
-
1Работает как очарование, и это самое чистое решение. Это должен быть принятый ответ. – vbocan 10 August 2016 в 05:11
-
2Согласен. Только одно замечание: не пытайтесь сделать тег самозакрывающегося объекта. Текст после него будет удален. – Sridhar-Sarnobat 14 November 2016 в 08:53
Вот отличная статья . Вы можете реализовать общую библиотеку и просто использовать ниже код для импорта любых файлов HTML в одной строке.
<head>
<link rel="import" href="warnings.html">
</head>
Вы также можете попробовать Google Polymer
-
1"просто используйте ниже код для импорта любых файлов HTML в одной строке" довольно неискренен. Затем вы должны написать JS, чтобы использовать любой контент, который вы импортировали, поэтому он заканчивается тем, что больше, чем «одна строка». – skybondsor 15 April 2017 в 13:42
Вы можете использовать polyfill из HTML Imports ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ) или это упрощенное решение https: // github.com/dsheiko/html-import
Например, на странице вы импортируете блок HTML следующим образом:
<link rel="html-import" href="./some-path/block.html" >
Блок может иметь импорт своих own:
<link rel="html-import" href="./some-other-path/other-block.html" >
Импортер заменяет директиву загруженным HTML в значительной степени похожим на SSI
. Эти директивы будут подаваться автоматически, как только вы загрузите этот небольшой JavaScript:
<script async src="./src/html-import.js"></script>
Он будет обрабатывать импорт, когда DOM будет готов автоматически. Кроме того, он предоставляет API, который можно использовать для запуска вручную, для получения журналов и т. Д. Наслаждайтесь:)
-
1– Andrew Truckle 27 October 2018 в 21:07
-
2– Dmitry Sheiko 29 October 2018 в 09:51
PHP - это язык сценариев на уровне сервера. Он может делать много вещей, но одно популярное использование - включение HTML-документов внутри ваших страниц, во многом то же, что и SSI. Подобно SSI, это технология уровня сервера. Если вы не уверены, что у вас есть PHP-функции на вашем сайте, обратитесь к вашему провайдеру хостинга.
Вот простой PHP-скрипт, который вы можете использовать для включения фрагмента HTML на любую веб-страницу с поддержкой PHP:
Сохраните HTML для общих элементов вашего сайта, чтобы разделить файлы. Например, ваш раздел навигации может быть сохранен как navigation.html или navigation.php. Используйте следующий PHP-код для включения этого HTML на каждую страницу.
<?php require($DOCUMENT_ROOT . "navigation.php"); ?>
Используйте тот же код на каждой странице, которую вы хотите включить в файл. Обязательно измените имя файла с повышенным освещением на имя и путь к вашему включенному файлу.
Если вы используете какую-либо фреймворк, например django / bootle, они часто отправляют некоторый механизм шаблонов. Предположим, вы используете бутылку, а механизм шаблонов по умолчанию - SimpleTemplate Engine . Ниже приведен чистый html-файл
$ cat footer.tpl
<hr> <footer> <p>© stackoverflow, inc 2015</p> </footer>
. Вы можете включить footer.tpl в свой основной файл, например:
$ cat dashboard.tpl
%include footer
Кроме того, вы также можете передать параметр в ваш dashborard.tpl.
В w3.js включены такие работы:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
-
1– Kaj Risberg 2 October 2018 в 06:51
Ответ Атари (первый!) был слишком убедителен! Очень хорошо!
Но если вы хотите передать имя страницы, которая будет включена как параметр URL, этот пост имеет очень хорошее решение для использования в сочетании с:
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
Таким образом, это будет примерно так:
Ваш URL:
www.yoursite.com/a.html?p=b.html
Теперь код a.html становится:
<html>
<head>
<script src="jquery.js"></script>
<script>
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
$(function(){
var pinc = GetURLParameter('p');
$("#includedContent").load(pinc);
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
Это сработало для меня очень хорошо! Я надеюсь, что помогли:)
Расширение ответа lolo сверху, вот немного больше автоматизации, если вам нужно включить много файлов:
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
И затем включить что-то в html:
<div data-include="header"></div>
<div data-include="footer"></div>
Что будет включать в себя файлы views / header.html и views / footer.html
-
1
-
2Очень полезно. Есть ли способ передать аргумент через другой параметр данных, например
data-argument, и получить его во включенном файле? – chris 8 April 2016 в 09:45 -
3Небольшое предложение - вам не нужен
class="include"- просто сделайте селектор jQueryvar includes = $('[data-include]');– jbyrd 8 December 2016 в 20:32 -
4
-
5@ArtemBernatskyi Помогает ли это при запуске локального сервера? Вот простой учебник: developer.mozilla.org/en-US/docs/Learn/Common_questions/… – mhanisch 10 September 2017 в 20:53
Бесстыдный штекер библиотеки, которую я написал, решил это.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
Вышеуказанное будет содержать содержимое /path/to/include.html и заменить его div.
-
1
-
2@Seth это не похоже. Я собираюсь поиграть с src и посмотреть, смогу ли я это сделать. Благодаря майкл-марру – xandout 16 October 2014 в 03:29
-
3Brilliant !!!! Кажется, что ваше единственное решение, которое ЗАМЕНЯЕТ тег div, используемый в качестве токена для того, куда его вставлять. Я собираюсь изучить источник осторожно позже! :-) – kpollock 30 July 2016 в 14:27
-
4
-
5Благодаря этим работам он включает HTML / CSS, но не Javascript из исходных файлов. Вам просто нужно включить его снова, где бы вы ни использовали
<div data-include="/path/to/include.html"></div>. Этот инструмент упрощает простой простой макетирование без плагинов в чистом виде. – Vincent Tang 4 April 2018 в 18:50
Чтобы вставить содержимое именованного файла:
<!--#include virtual="filename.htm"-->
-
1используя угловые скобки для []: [! - # include virtual = "include_omega.htm" -] – St.Eve 18 August 2013 в 06:38
Это помогло мне. Для добавления блока html-кода из b.html в a.html это должно перейти в тег head в a.html:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Затем в теге body сделан контейнер с уникальным id и блоком javascript для загрузки b.html в контейнер следующим образом:
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
-
1Как этот ответ отличается от принятого ответа на этот вопрос? – Mohammad Usman 16 January 2018 в 13:26
-
2@MohammadUsman Здесь контейнер и код javascript лежат в теге тела, а принятый ответ помещает их в тег заголовка и оставляет контейнер только в теге body. – Ramtin 16 January 2018 в 16:57
В качестве альтернативы, если у вас есть доступ к файлу .htaccess на вашем сервере, вы можете добавить простую директиву, которая позволит интерпретировать php в файлах, заканчивающихся расширением .html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Теперь вы можете использовать простой PHP-скрипт для включения других файлов, таких как:
<?php include('b.html'); ?>
-
1Да, это очень плохой совет. Файлы Html являются статическими и очень быстро обслуживаются apache. Если вы добавите все html-файлы в парсер php только для файлов inlcude, у вас будет много проблем с производительностью на ваших серверах. Способ javascript (jQuery или простой JS) - не очень хорошие решения, но они все еще более эффективны и менее опасны, чем эта. – Gfra54 23 May 2014 в 09:18
-
2@ Gfra54 Вы имеете в виду, что у нас будут проблемы с производительностью, если мы будем использовать Apache только для этого, и мы не делаем никакой работы php для сайта? Или это будет замедляться, если я буду использовать php и эту штуку вместе? – Awal Garg 23 May 2014 в 16:12
-
3Внимание: добавление этих строк в
.htaccessможет привести к тому, что страницыhtmlпопытаются загрузить как файлы, а не просматривать в браузере. Сначала проверьте. Отказ от ответственности: Это произошло со мной, когда я попробовал вышеуказанное решение. Мой.htaccessбыл пуст, кроме двух строк. Предостережение. Попробуйте использовать jQuerylolo(ниже). – gibberish 29 December 2015 в 20:38 -
4человек, я усложнял себя, хотя и сделал это раньше. Спасибо за напоминание. Для этой цели мне это не влияет на производительность, поэтому я классный. – Gman 16 June 2016 в 07:08
-
5Ха, этот потрясающий ответ - потрясающий пример готового мышления. Я бы никогда не предложил его, но, может быть, спасатель, когда вам понадобится кусочек кукурузы php. :-) – moodboom 7 January 2017 в 16:44
Ну, если все, что вам нужно сделать, это поместить текст из отдельного файла на вашу страницу (теги в тексте тоже будут работать), вы можете это сделать (ваши стили текста на главной странице - test.html - все равно работать):
test.html
<html>
<body>
<p>Start</p>
<p>Beginning</p>
<div>
<script language="JavaScript" src="sample.js"></script>
</div>
<p>End</p>
</body>
</html>
sample.js
var data="Here is the imported text!";
document.write(data);
Вы всегда можете воссоздать теги HTML, которые вы хотите сами, в конце концов. Существует необходимость в серверных сценариях, чтобы захватить текст из другого файла, если вы не хотите делать что-то еще.
В любом случае, я начинаю использовать это для того, чтобы это сделать, если я обновляю описание, распространенное среди множества файлов HTML, мне нужно только обновить один файл, чтобы сделать это (файл .js), а не каждый HTML-файл, содержащий текст.
Итак, в резюме вместо импортируя файл .html, более простым решением является импорт файла .js с содержимым файла .html в переменной (и запись содержимого на экран, где вы вызываете скрипт).
Спасибо за вопрос.
html5rocks.com имеет очень хорошее руководство по этому материалу, и это может быть немного поздно, но я сам не знал, что это существовало. У w3schools также есть способ сделать это, используя свою новую библиотеку w3.js. Дело в том, что для этого требуется использование веб-сервера и объекта HTTPRequest. Вы не можете загружать их локально и тестировать на своем компьютере. Однако вы можете использовать полисы, указанные в ссылке html5rocks вверху, или следовать их руководству. С малой магией JS вы можете сделать что-то вроде этого:
var link = document.createElement('link');
if('import' in link){
//Run import code
link.setAttribute('rel','import');
link.setAttribute('href',importPath);
document.getElementsByTagName('head')[0].appendChild(link);
//Create a phantom element to append the import document text to
link = document.querySelector('link[rel="import"]');
var docText = document.createElement('div');
docText.innerHTML = link.import;
element.appendChild(docText.cloneNode(true));
} else {
//Imports aren't supported, so call polyfill
importPolyfill(importPath);
}
Это сделает ссылку (может измениться на желаемый элемент ссылки, если она уже установлена), установите импорт (если у вас уже нет это), а затем добавьте его. Затем он оттуда возьмет это и проанализирует файл в HTML, а затем добавит его к нужному элементу под div. Все это можно изменить в соответствии с вашими потребностями из добавляемого элемента к используемой вами ссылке. Я надеюсь, что это помогло, теперь это может быть неуместно, если появятся более быстрые и быстрые способы, не используя библиотеки и фреймворки, такие как jQuery или W3.js.
UPDATE: Это вызовет ошибку, говорящую, что локальный импорт были заблокированы политикой CORS. Может потребоваться доступ к глубокой сети, чтобы иметь возможность использовать это из-за свойств глубокого Интернета. (Нет практического использования)
Checkout HTML5 импортирует через учебник html5rocks и в polymer-project
Например:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
-
1подробнее здесь html5rocks.com/ru/tutorials/webcomponents/imports – svassr 18 September 2014 в 16:17
-
2Импорт HTML не предназначен для фактического включения содержимого на странице напрямую. Код в этом ответе делает только
stuff.htmlдоступным в качестве шаблона на родительской странице, но вам придется использовать скрипты для создания clones его DOM в родительской чтобы они были видны пользователю. – waldyrious 25 October 2014 в 19:18 -
3Инструкции на html5rocks.com для вставки содержимого одной HTML-страницы в другую, похоже, пока не работают во многих браузерах. Я пробовал его в Opera 12.16 и Superbird версии 32.0.1700.7 (233448) без эффекта (на Xubuntu 15.04). Я слышал, что это не работает в Firefox (из-за ошибки, которая, надеюсь, была исправлена) или много версий Chrome. Поэтому, хотя похоже, что это может быть идеальным решением в будущем, это не кросс-браузерное решение. – Shule 27 August 2015 в 11:29
-
4По-видимому, он не готов к концу 2016 года в FireFox (45.5.1 ESR). Консоль JS говорит:
TypeError: ... .import is undefined. MDN говорит: «Эта функция в настоящее время не реализована ни в каких браузерах». Кто-нибудь знает, возможно ли построить FF с этой функцией? – sphakka 10 December 2016 в 16:32 -
5Firefox не поддержит его. Чтобы включить его, попробуйте установить «dom.webcomponents.enabled». Он будет работать только в Chrome и Opera, Android с обновляемым веб-представлением (startng 4.4.3). Браузеры Apple не поддерживают его. Это выглядит неплохой идеей для веб-компонентов, но пока не реализовано. – Maxim 3 January 2017 в 20:51
Мое решение аналогично решению lolo выше. Однако я вставляю HTML-код через document.write JavaScript вместо использования jQuery:
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
Причина, по которой я против использования jQuery заключается в том, что размер jQuery.js составляет ~ 90 КБ, и я хочу, чтобы количество загружаемых данных было как можно меньше.
Чтобы получить правильно экранированный JavaScript-файл без особых усилий, вы можете использовать следующую команду sed:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
Или просто используйте следующий удобный скрипт bash, опубликованный как Gist на Github, который автоматизирует всю необходимую работу, конвертируя b.html в b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Кредиты на Грег Миншалл для улучшенной команды sed, которая также ускользает назад косые черты и одинарные кавычки, которые моя оригинальная команда sed не рассматривала.
-
1
-
2Простое, элегантное решение. Хорошо работает для меня, спасибо! – Baratong 21 September 2013 в 20:31
-
3Это лучший метод, на мой взгляд !!! Так чисто и удовлетворительно! – Maurice Tempelsman 21 February 2014 в 16:08
-
4@Baratong, за исключением того факта, что ваш html пронизан escape-символами! – Trevor Hickey 15 April 2014 в 19:08
-
5@TrevorHickey Да, вы правы, это недостаток моего решения, и это не очень элегантно. Однако, поскольку вы можете вставить «\» с простым регулярным выражением в конце каждой строки, это работает для меня лучше всего. Хм ... может быть, я должен добавить к своему ответу, как сделать вставку с помощью регулярного выражения ... – Tafkadasoh 23 April 2014 в 08:59
-
6– jbyrd 8 December 2016 в 20:18
-
7– wizzwizz4 2 November 2017 в 19:22
Я пришел к этой теме, ища что-то подобное, но немного отличающееся от проблемы, заданной лоло. Я хотел создать HTML-страницу с алфавитным меню ссылок на другие страницы, и каждая из других страниц могла бы или не существовать, а порядок, в котором они были созданы, может быть не алфавитным (и даже не численным). Кроме того, как и Tafkadasoh, я не хотел раздувать веб-страницу с помощью jQuery. После исследования проблемы и экспериментов в течение нескольких часов, вот что сработало для меня, добавив соответствующие замечания:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
<meta name="Author" content="me">
<meta copyright="Copyright" content= "(C) 2013-present by me" />
<title>Menu</title>
<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;
/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them. Here, there are 20.
*/
function initialize()
{ window.name="Menu";
form = document.getElementById('MENU');
for(indx=0; indx<20; indx++)
{ str = "00" + indx;
tmp = str.length - 3;
str = str.substr(tmp);
script = document.createElement('script');
script.type = 'text/javascript';
script.src = str + ".js";
form.appendChild(script);
}
/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.
The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->
(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.
Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000". When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available". This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for. Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined". Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined". More on that later.
The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded. That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/
window.setTimeout("BuildMenu();", 2000);
return;
}
//So here is the function that gets called after the 2-second delay
function BuildMenu()
{ dtno = 0; //index-counter for the "dat" array
for(indx=0; indx<20; indx++)
{ str = "00" + indx;
tmp = str.length - 3;
str = "F" + str.substr(tmp);
tmp = eval(str);
if(tmp != unde) // "unde" is deliberately undefined, for this test
dat[dtno++] = eval(str + "()");
}
/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not. Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".
Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with. The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page. A description
and a "<br />" tag gets included for each link. Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.
Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish. But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/
dat.sort();
for(indx=0; indx<dtno; indx++)
{ write = document.createElement('span');
write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
"', 'Menu');\" style=\"color:#0000ff;" +
"text-decoration:underline;cursor:pointer;\">" +
dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
form.appendChild(write);
}
return;
}
// -->
</script>
</head>
<body onload="initialize();" style="background-color:#a0a0a0; color:#000000;
font-family:sans-serif; font-size:11pt;">
<h2>
MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>
Простая сторона сервера включает директиву для включения другого файла, найденного в той же папке, который выглядит следующим образом:
<!--#include virtual="a.html" -->
-
1
-
2Вот ссылка для настройки SSI для вашего сервера: httpd.apache.org/docs/2.4/howto/ssi.html#configuring – shasi kanth 19 January 2015 в 04:41
-
3
-
4Включение SSI делает веб-сервер чуть медленнее (поэтому его следует избегать до абсолютной необходимости). – Amit Verma 18 October 2015 в 14:19
$(function(){})выполнится только после завершения загрузки документа. – ProfK 10 May 2015 в 16:20XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.– Basj 4 December 2016 в 13:02