有没有一种方法可以让 link HTML 页面在一起并在没有数据库的情况下在它们之间共享信息？

Question

嗨（英语不是我的第一语言，所以请原谅我的任何错误），

我的代码需要一些帮助。我在一个学校项目的网站上工作。我需要用 HTML/css/php/JavaScript 制作一个专业的网站。我的主题是电子游戏 CS:GO。该站点的主要目的是提供有关如何玩 surtain maps/wapens 等的信息。我不会说我擅长 HTML，但我知道如何做导航菜单之类的事情和 css 中的 videos/positioning。

我目前有一个索引文件和大约 30 个包含有关游戏信息的单独文件。我知道我可以为此使用数据库，但这不是本次作业的目的。除了 information/some 图片之外，几乎每个文件都完全相同。

我想知道是否有办法让一页计算我的 header/navigation menu/footer 的代码，而另一页仅供参考。我可以像现在一样保留它，但每次我编辑文件 name/location 时，我都必须打开每个文件。一个例子：当我在导航菜单中链接了一个文件并更改了文件名时，假设它名为 map1.html ，我将其更改为 map_1.html 。我必须打开并手动更改每个文件。

当我自己研究时，我发现了 iframe 属性。但我无法让它成功工作。那么还有什么我可以使用的吗？也许有 JavaScript 或 php 的东西？我也没有使用 JavaScript 或 php 的经验，所以如果您 post 一些代码，请解释一下它是如何工作的以及我如何使用它。

我脑子里有这个代码吗：。我知道这行不通，但它可以更好地说明我为什么要这样做。在navigation-menu.html中只有导航菜单和css的代码，没有别的。我正在寻找这样的东西。该行的目的是复制导航-menu.html 文件中的所有内容并显示它。

页面示例。我想将页眉、页脚之类的内容放在单独的文件中。只是为了澄清，正文 class 如果每个文件的背景不同

<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>

Answer 1

你为什么不创建一个 PHP 文件，你将在其中写入如下变量：

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

并在每个文件中调用它们？

例如：

您想创建一个带有 CS:GO 徽标的 div，然后您编写并设计它的外观，然后将其输入到 echo 语句中。

像这样：

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

记得将其插入 <?php ?> 标签和 ofc 以开始会话:)

Answer 2

您可以在不同的文件中创建内容，而不是创建 header 文件和 footer 文件。首先创建文件，例如 index.html。请注意，我添加了一个 id ul_gamemodes 和另一个 ul_maps.

在 javascript 中，函数 readFile(file, parent) 有两个参数：您拥有内容的文件（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 时，您可以看到这 2 个文件的内容。

由于这在 SO 中不起作用，您可以打开此 Codepen Project

Answer 3

其他答案过于复杂。

如果您有 PHP 可用但不能使用数据库，那么您可以使用页眉、页脚和内容来做您想做的事，只需 include()-ing 在正确的位置。我工作中的 "static" 页面中有不少（好吧，老实说，所有这些页面）看起来像

<?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请求将内容从外部 file/url 加载到 <div> 标签中。

iframe - https://www.w3schools.com/tags/tag_iframe.asp

通过 javascript - https://www.w3schools.com/howto/howto_html_include.asp

包含

至于链接和导航，您始终可以在 URL 上使用锚标记或 GET 参数以将其全部 "single file" 关闭 index.php 或 index.html 或如果一切都失败了，只需构建一个菜单文件，将普通的旧 href 链接引入您的内容文件，并应用 header/footers。

有没有一种方法可以让 link HTML 页面在一起并在没有数据库的情况下在它们之间共享信息？

Is there a way how I can link HTML pages together and share information between them without a database?

html

php

no-database