有沒有一種方法可以在沒有數據庫的情況下將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