Есть ли способ, как я могу связать вместе 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>
Источник

3 ответа

Решение

Вместо создания 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

Источник

Другие ответы слишком усложняют это.

Если у вас есть 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, или, если ничего не помогает, просто создайте файл меню, чтобы вызвать его с простым старые ссылки href на ваш файл содержимого с примененными верхними / нижними колонтитулами.

Источник

Почему бы вам не создать PHP-файл, в который вы будете записывать переменные вроде:

$SESSION['example'] = echo "SOMETHING... SOMETHING... SOMETHING..."

и вызывать их в каждом файле?

Например:

Вы хотите создать div с логотипом CS:GO, затем написать и стилизовать, как он должен выглядеть, а затем ввести его в echo заявление.

как это:

echo "<div class='example'>LOGO OF CS:GO</div>";

Не забудьте вставить его в <?php ?> тэги и оф c для начала сессии:)

Источник
Другие вопросы по тегам