我如何使用javascript將文件的一部分包含在另一個文件中

Question

我正在創建一個網站，我不打算添加后端語言。 但是我有一個固定的標題和導航按鈕，我想將它們包含在其他頁面上，例如“關於我們”和“聯系我們”頁面。 我有一個鏈接到所有 html 頁面的 javascript 文件。 我嘗試了以下代碼，但沒有用。 任何幫助將不勝感激。


  
 
  
  
   
    
        function showHeader(){
        var showHead = document.querySelector(".header-content");

        document.querySelector("body").innerHtml = showHead;
    } 
        <!--first html file-->
    <!DOCTYPE html>
    <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">

    <title>TITLE</title>
</head>
<body>
    
    <div class="container">
    <span class="header-content">

                    <a class="brand-name" href="index.html">
                            BRAND NAME
                    </a>

                    <span class="head-content-2">
                        <a class="navbar-link link1" href="index.html">Home</a>
                        <a class="navbar-link link2" href="about.html">AboutUs</a>
                        <a class="navbar-link link3" href="contact.html">Contact Us</a>
                    </span>

                </span>
                
            <!--second html file-->   
            
            <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title>ABOUT US</title>
    </head>
    <body onload="showHeader()">
        
        <script type="text/javascript" src="js/script.js"></script>
    </body>
    </html>

Answer 1

您在second html file添加的 javascript 函數將不起作用，因為ShowHeader函數中的代碼行下方正在查找該頁面上不存在的 DOM 元素。

var showHead = document.querySelector(".header-content");

我想您正在尋找一些 HTML 預處理器，以便您可以編寫一次公共元素並將其包含在您想要的任何頁面上。 然后您可以編譯這些頁面並生成呈現整個頁面的 HTML 輸出。

結帳 PUG ( https://pugjs.org/ )。

這是有用文章的鏈接，可幫助您使用 pug 模板進行設置和運行： https : //codeburst.io/getting-started-with-pug-template-engine-e49cfa291e33

PUG 的包含功能允許您做您想做的事情。 ( https://pugjs.org/language/includes.html )

我希望這有幫助！

我如何使用javascript將文件的一部分包含在另一個文件中

問題描述

1 個解決方案

解決方案1
0 2020-03-18 23:27:40

我如何使用javascript將文件的一部分包含在另一個文件中

問題描述

1 個解決方案

解決方案1 0 2020-03-18 23:27:40

解決方案1
0 2020-03-18 23:27:40