Как я могу включить часть файла в другой файл с javascript - PullRequest
0 голосов
/ 19 марта 2020

Я создаю веб-сайт и не собираюсь добавлять язык бэкэнда. Но у меня есть фиксированный заголовок и кнопки навигации, которые я хочу включить на других страницах, таких как «о нас» и «связаться с нами». У меня есть один javascript файл, который связан со всеми html страницами. Я попробовал следующий код, но он не работал. Любая помощь будет принята с благодарностью.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    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>

1 Ответ

0 голосов
/ 19 марта 2020

Функция javascript, которую вы добавили в second html file, не будет работать, поскольку ниже строки кода в функции ShowHeader выполняется поиск элемента DOM, которого нет на этой странице.

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

Полагаю, вы ищете какой-нибудь препроцессор HTML, чтобы вы могли один раз написать общие элементы и включить их на любые нужные вам страницы. Затем вы можете скомпилировать эти страницы и сгенерировать HTML вывод, отображающий всю страницу.

Checkout PUG (https://pugjs.org/).

Вот ссылка на полезную статью это поможет вам настроить и запустить шаблоны pug: https://codeburst.io/getting-started-with-pug-template-engine-e49cfa291e33

Функция включения PUG позволяет вам делать именно то, что вы хотите. (https://pugjs.org/language/includes.html)

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...