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

Question

嗨（英语不是我的母语，因此请您原谅我的所有错误），

我的代码需要帮助。 我正在一个学校项目的网站上。 我需要使用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文件中的所有内容并将其显示。

页面的示例。 我想将诸如.header，footer之类的内容放在单独的文件中。 仅作说明，如果每个文件的背景不同，则正文类

<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

您可以在其他文件中创建内容，而不是创建header文件和footer文件。 首先，您创建文件，例如index.html 。 请注意，我添加了一个ID 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项目

Answer 2

其他答案过于复杂。

如果您有可用的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

至于链接和导航，您始终可以在URL上使用锚标记或GET参数，以将其全部“单个文件”保留在index.php或index.html之外，或者如果所有其他操作都失败，则只需构建一个菜单文件以纯文本格式导入已应用页眉/页脚的旧href链接到您的内容文件。

Answer 3

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

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

并在每个文件中要求它们？

例如：

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

像这样：

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

记住将其插入<?php ?>标记和ofc中以开始会话：)

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

问题描述

3 个解决方案

解决方案1
0 已采纳 2018-10-08 19:10:37

解决方案2
0 2018-10-08 19:47:41

解决方案3
-1 2018-10-07 20:39:46

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

问题描述

3 个解决方案

解决方案1 0 已采纳 2018-10-08 19:10:37

解决方案2 0 2018-10-08 19:47:41

解决方案3 -1 2018-10-07 20:39:46

解决方案1
0 已采纳 2018-10-08 19:10:37

解决方案2
0 2018-10-08 19:47:41

解决方案3
-1 2018-10-07 20:39:46