我如何使用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