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之类的内容放在单独的文件中。只是为了澄清起见，如果每个文件的背景不同，则正文类

NotificationCompat.Builder

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时，就可以看到这两个文件中的内容。

由于此方法无法正常运行，因此您可以打开此Codepen Project

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 个答案: