How to use the same HTML-Block on multiple websites?

Question

I'm just coding my first Website and it has lots of Subsites. Every Website needs the same code-block at some point. This code block just contains HTML code. Is it possible to make a data with this code-block and import it on every website? My goal is: If I have to update the code-block I just want to do it once.

The code-block is a sidebar and looks like this:

<div id="sidebar">
    <div class="inner">
        <nav id="menu">
            <ul>
            <li><a href="../index.html">Homepage</a></li>
            <li>
                <span class="opener">SomeName</span>
                <ul>
                <li><a href="../Somestuff/SomeWebsite.html">Main Page</a></li>
                </ul>
            </li>
            </ul>
        </nav>
    </div>
</div>

There are 1000 ways to do this. Use php, java or whatever server language you want to include files in another. — cloned, Jul 10 '20 at 07:34
You literally just described the whole idea behind React.js. Might be daunting to someone just starting off but worth looking into. Link----> https://reactjs.org/ — StrayAnt, Jul 10 '20 at 07:36

MefAldemisov · Answer 1 · 2020-07-10T08:18:53.623

2

This question could be useful. Also this post asks about similar things.

Also frameworks (such as Vue, React, Angular...) are used for such purposes.

edited Jul 10 '20 at 08:18

answered Jul 10 '20 at 07:35

MefAldemisov

867
10
21

So i tried
with the code shown above in sidebar.html. But it does not work
– Titanlord Jul 10 '20 at 07:45
First of all, try to reverse it (`
`) and check that jquery is loaded correctly.
– MefAldemisov Jul 10 '20 at 07:49
I reversed it -> nothing happened. I'm loading jquery with at the end of the code before <\body> – Titanlord Jul 10 '20 at 07:56
Load jquery earlier - in `` – MefAldemisov Jul 10 '20 at 07:58
I tried, nothing happend. I loaded it at the beginning of head and body. :c – Titanlord Jul 10 '20 at 08:05
Ah i see ( sorry I'm a HTML noob ). The access has been blocked. "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." Does my sidebar.html has the wrong format? – Titanlord Jul 10 '20 at 08:09
Checkout [this](https://security.stackexchange.com/questions/190266/why-chrome-blocks-ajax-locally) question. – MefAldemisov Jul 10 '20 at 08:15
@Titanlord I've edited the answer a bit (the second link seems to be better solution) – MefAldemisov Jul 10 '20 at 08:20

score 0 · Answer 2 · answered Jul 10 '20 at 07:38

0

Which extensions are your file? Php or html? Cause if it’s php you can make a new file (for your example: nav.php) and then in every subsites you need to do: require path_to_your_nav.php

If it’s html, i dont know there is no solution yet

answered Jul 10 '20 at 07:38

Baptiste Leroux

49
8

score 0 · Answer 3 · answered Jul 10 '20 at 08:38

You could make a simple JS function that sets the innerHTML of a already existing HTML element. And put the function in an external JS file.

example below

<!DOCTYPE html>

<head>
    <title>Test</title>

    <!-- link external js file with create element function -->
   <script type="text/javascript">
        function createElement(){
            //Get parent container
            const parent = document.getElementById('sidebar');

            //Set inner html 
            parent.innerHTML = 
            `<div id="sidebar">
                <div class="inner">
                    <nav id="menu">
                        <ul>
                        <li><a href="../index.html">Homepage</a></li>
                        <li>
                            <span class="opener"SomeName</span>
                            <ul>
                            <li><a href="../Somestuff/SomeWebsite.html">Main Page</a></li>
                            </ul>
                        </li>
                        </ul>
                    </nav>
                </div>
            </div>`;
        }
   </script>
</head>
<body>
    
    <div id="sidebar">
        <script type="text/javascript">
            createElement();
        </script>
    </div>


</body>

</html>

How can i unclude this to my external file? – Titanlord Jul 10 '20 at 09:40 — Titanlord, Jul 10 '20 at 09:40

How to use the same HTML-Block on multiple websites?

3 Answers3