0

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

我的代码需要一些帮助。我在一个学校项目的网站上工作。我需要用 HTML/css/php/JavaScript 制作一个专业的网站。我的主题是电子游戏 CS:GO。该网站的主要目的是提供有关如何播放 surtain maps/wapens 等的信息。我不会说我擅长 HTML，但我知道如何在 css 中执行导航菜单和视频/定位等操作.

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

我想知道是否有一种方法可以让一页计算我的页眉/导航菜单/页脚的代码，而另一页仅用于信息。我可以像现在一样保留它，但是每次编辑有关文件名/位置的内容时，我都必须打开每个文件。一个例子：当我在导航菜单中链接了一个文件并更改了文件的名称时，假设它称为 map1.html 并将其更改为 map_1.html 。我必须打开并手动更改每个文件。

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

在我的脑海中我有这个代码：. 我知道这不起作用，但它让我更好地了解我为什么尝试这样做。在 navigation-menu.html 中只有导航菜单和 css 的代码，没有别的。我正在寻找这样的东西。该行的目的是复制navigation-menu.html 文件中的所有内容并显示它。

一个页面的例子。我希望将诸如页眉、页脚之类的内容放在单独的文件中。只是为了澄清，如果每个文件的背景不同，body 类

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

3 回答 3

0

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

于 2018-10-08T19:10:37.190 回答
0

其他答案过于复杂。

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

<?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 链接到您的内容文件，并应用了页眉/页脚。

于 2018-10-08T19:47:41.433 回答
-1

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

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

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

例如：

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

像这样：

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

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

于 2018-10-07T20:39:46.227 回答