Есть ли способ, как я могу связать вместе HTML-страницы и обмениваться информацией между ними без базы данных?
Привет (английский не мой родной язык, так что прости меня за любые ошибки),
Мне нужна помощь с моим кодом. Я работаю над сайтом для школьного проекта. Мне нужно сделать профессиональный сайт с HTML / CSS / PHP / JavaScript. Моя тема — видеоигры CS: GO. Основная цель сайта — дать информацию о том, как играть в карты / видео и т. Д. Я бы не сказал, что я хорош в HTML, но я знаю, как делать такие вещи, как навигационное меню и видео / позиционирование в css. ,
В настоящее время у меня есть индексный файл и около 30 отдельных файлов, содержащих информацию об игре. Я знаю, что могу использовать базу данных для этого, но это не цель этого задания. Почти каждый файл точно такой же, кроме информации / некоторых изображений.
Я хотел бы знать, есть ли способ, которым я могу иметь одну страницу, содержащую код для моего верхнего / навигационного меню / нижнего колонтитула, а другую только для информации.
Я могу сохранить его, как в настоящее время, но каждый раз, когда я редактирую что-то об имени / местоположении файла, я должен открывать каждый отдельный файл.
Пример:
Когда у меня есть файл, связанный в моем меню навигации, и я меняю имя файла, скажем, он называется map1.html, и я меняю его на map_1.html. Я должен открыть и вручную изменить каждый файл.
Когда я провел собственное исследование, я обнаружил атрибут iframe. Но я не мог заставить его работать успешно. Так есть что-то еще, что я мог бы использовать? Может быть, что-то с JavaScript или PHP? У меня также нет опыта работы с JavaScript или php, поэтому, если вы разместите некоторый код, пожалуйста, объясните немного, как он работает и как я могу его использовать.
У меня в голове есть этот код:. Я знаю, что это не работает, но дает лучшее представление о том, почему я пытаюсь это сделать. В navigation-menu.html есть только код для меню навигации и css, ничего нет. Я ищу что-то подобное. Цель строки — скопировать все в файле navigation-menu.html и отобразить его.
Пример страницы. Я хотел бы иметь такие вещи, как, верхний и нижний колонтитулы, чтобы быть в отдельном файле. Просто для пояснений, класс тела, если для разных фонов в каждом файле
<html>
<head>
<!--Titel/Icon/CSS files-->
</head>
<header>
<!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
<!--Other pages (history-about us-home(index.html) -->
<li><a>Game Modes</a>
<ul>
<!--The different gamemodes-->
</ul>
</li>
<li><a>Maps</a>
<ul>
<!--The different maps-->
</ul>
</li>
<li><a>Wapens</a>
<ul>
<!--The different guns-->
</ul>
</li>
<li><a>Equipment</a>
<ul>
<!--The different Equipment-->
</ul>
</li>
</ul>
<center>
<!--An images-->
<p class="tekst">
<!--Information about the game-->
</p>
</center>
</body>
<footer class="footer" id="footer-aug">
<!--footer-->
</footer>
</html>
Решение
Вместо создания header файл и footer файл вы можете создать контент в другом файле. Сначала вы создаете файл, например index.html, Обратите внимание, что я добавил идентификатор ul_gamemodes и другой ul_maps,
В JavaScript функция readFile(file, parent) принимает 2 аргумента: файл, в котором у вас есть контент (URL), и родительский div, в который вы хотите поместить контент из файла.
<html>
<head>
<!--Titel/Icon/CSS files-->
</head>
<header>
<!--Banner/2 small images-->
</header>
<body class="GW-CT-AUG">
<ul id="navigatie_menu">
<!--Other pages (history-about us-home(index.html) -->
<li><a>Game Modes</a>
<ul id="ul_gamemodes">
<!--The different gamemodes-->
</ul>
</li>
<li><a>Maps</a>
<ul id="ul_maps">
<!--The different maps-->
</ul>
</li>
<li><a>Wapens</a>
<ul>
<!--The different guns-->
</ul>
</li>
<li><a>Equipment</a>
<ul>
<!--The different Equipment-->
</ul>
</li>
</ul>
<center>
<!--An images-->
<p class="tekst">
<!--Information about the game-->
</p>
</center>
<footer class="footer" id="footer-aug">
<!--footer-->
</footer>
<script>
function readFile(file, parent){
var myContent = new XMLHttpRequest();
myContent.open("GET", file, false);
myContent.onreadystatechange = function ()
{
if(myContent.readyState === 4)
{
if(myContent.status === 200 || myContent.status == 0)
{
var myText = myContent.responseText;
console.log(myText);
parent.innerHTML = myText
}
}
}
myContent.send(null);
}
readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);
</script>
</body>
</html>
Далее вы создаете файл с именем gamemodes.txt где вы помещаете контент, который вы хотите поместить в #ul_gamemodesи другой файл maps.txt где вы помещаете контент, который вы хотите поместить в ul_maps, Обратите внимание, что в index.html Вы читаете эти файлы:
readFile("gamemodes.txt", ul_gamemodes);
readFile("maps.txt", ul_maps);
Теперь, когда вы открываете index.html вы можете увидеть содержимое этих двух файлов на месте.
Так как это не сработает в SO, вы можете открыть это Codepen Project
Другие решения
Другие ответы слишком усложняют это.
Если у вас есть PHP, но вы не можете использовать базы данных, вы можете делать все, что хотите, с заголовком, нижним колонтитулом, контентом и просто include()-при необходимости в нужном месте. Довольно много моих «статичных» страниц на работе (ну, все честно) выглядят примерно так
<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/header.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/left_side.php"); ?>
<div id="main_content" class="main_content">
Regular HTML stuff goes here!
</div> <!-- end main_content -->
<?php include($_SERVER['DOCUMENT_ROOT']."/this_app/right_side.php"); ?>
<?php include($_SERVER['DOCUMENT_ROOT']."/global-style/footer.php"); ?>
Если вы можете использовать только чистый HTML, CSS и JavaScript, вы можете использовать <iframe> или поработайте с JavaScript и http-запросами, чтобы загрузить контент из внешнего файла / URL в <div> тег.
iframe — https://www.w3schools.com/tags/tag_iframe.asp
включить через JavaScript — https://www.w3schools.com/howto/howto_html_include.asp
Что касается ссылок и навигации, вы всегда можете использовать теги привязки или GET-аргументы в URL, чтобы сохранить все «один файл» вне index.php или index.html, или, если ничего не помогает, просто создайте файл меню, чтобы ввести его с простым old href ссылается на ваш файл содержимого с примененными колонтитулами.
Почему бы вам не создать PHP-файл, в который вы будете записывать переменные вроде:
$SESSION['example'] = echo "SOMETHING... SOMETHING... SOMETHING..."и вызывать их в каждом файле?
Например:
Вы хотите создать div с логотипом CS: GO, затем написать и стилизовать, как он должен выглядеть, а затем ввести его в echo заявление.
как это:
echo "<div class='example'>LOGO OF CS:GO</div>";
Не забудьте вставить его в <?php ?> теги и офс, чтобы начать сессию 🙂