Include another HTML file in an HTML file

Asked

Viewed 17,158 times

27

Setting: I’m putting together a layout, which will be used by third parties and I don’t know what language will be used. I have two Ivs, one will be the left menu and the other the content. They are separated by a Splitter, my doubts are:

  1. That left menu, I want to develop a html the part and call it for include, what’s the best way to do it?

  2. If I make call via javascript will be having problems with javascript contained in this page that will be inserted?

  3. Is there such a pattern in HTML5, CSS or some way simple to implement in Javascript?

I know that iframe is not a good solution. Through <object type="text/html" data="include.html"></object>, works but I believe that is not a good solution too.

jquery html html5
  • 1

    It would probably be good for you to do everything separately, but put it together in a template to deliver, with comments for the <!-- start of the.htm menu content - switch to include -->... ai poe o html do menu.htm..<! -- end of the menu contents.htm -->, I think it is simpler. Then the client sees working, and the programmer changes it later. (i.e., provide everything separately, plus a mixed demo file)

  • exact, I’m afraid to do something to try to separate and in the end get all confused.. like making a giant js code to call the includes.. will find q is necessary. .enfim.. would like to know if there is already something in Html5 searched and found nothing that works!

  • And there’s another, so I said, you can develop in your environment using your language includes, (just by the comments I mentioned above and below each include), and at the time of delivering to the customer you save the browser source same as "arquivomontado.html" and delivery together. Then he turns around (of course, if you can, explain to the programmer what you did).

  • I don’t know if the answers are really "outdated", but it doesn’t really have any complete ones that talk about multiple ways to solve the problem. Unfortunately I’m running out of time to complement mine - and it seems that people are voting blindly on it because it’s on top...

  • @bfavaretto your option is very clear and efficient, provided you have a webserver with server-side feature... but as you said, I’m seeing if there are other updated options...etc

  • @Dorathoto can explain what you mean by "due to recent amendments"?

Show 1 more comment

4 answers

31


If you’re using a webserver (for example, Apache or IIS), it probably supports Server-side includes. With this you could use, in the main HTML:

<!-- #include file="caminho-do-menu.html" -->
  • 1

    our this is so old and simple that had even forgotten me.....

  • 1

    Attentive, but then it can’t just be HTML, it will have to be an ASP or PHP to run Serverside. By the question, the solution must be Clientside.

16

I don’t know if I got it right, but if that’s right, and how did you tag , then why not use the load:

$("#idElemento").load('xpto.html');

If the content is static, however, it is better to process on the server, see the @bfavaretto response.

  • 1

    Other option client-side for those who do not want to deal directly with Javascript (it is still there, but under the cloths) is the csi.js. <div data-include="me-inclua.html"></div>. That said I also go in response in bfavaretto, in most cases server-side includes are a better option for using less bandwidth, not making the customer have to pay for multiple latency requests. etc..

  • 1

    and know if it will give many problems if the page included has javascript? type conflicts etc? or it goes well?

  • 1

    The scripts will be executed as if they were on the main page... obviously, that the execution order will vary, according to when the load will be executed.

  • 2

    Also, the enclosed html should be a fragment of html, not a complete HTML document, with head, body, etc.. otherwise it would be the same as adding all this into the div... imagine: <div><html><head>...</head><body>...</body></html></div> which makes no sense.

  • If I’m not mistaken there is a way to filter what will be inserted by load... if the included file is a complete HTML... I will search.

  • 2

    I found, it’s like: $("#idElementoDaPaginaMaster", "pagina.html #idElementoDaPaginaIncluida")

Show 1 more comment

5

The way developers are exploring are generators that do this for you. We have some good ones like the Jekyll and the Middleman. I chose to use Jekyll and it helps me a lot with a language that independent of the programmer, the understanding of the algorithm becomes easy. For example, when I have a home page that has 10 products, I make 1 model of what it would be like and one for iterating this repetition.

Example of the Jekyll:

<div class="produtos">
    {% for i in (1...9) %}
            <div class="product-align">
                <div class="product" itemscope itemtype="http://schema.org/Product">
                    <img itemprop="image" class="product-image center-block" alt="imagem produto" src="assets/images/produto01.png">
                    <p class="product-title" itemprop="name">Cadeira Tulipa</p>
                    <p class="product-review" itemprop="review">Clássica criação de Pierre Paulin</p>


                    <div class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <!-- div que separa itens referente ao preço de cada produto -->
                        <p class="product-price">De: R$2,999.00</p>
                        <!-- preço original -->
                        <p class="final-product-price" itemprop="price">Por: R$2,000.</p>
                        <!-- preço com desconto -->
                        <p class="parcel-product-price">Ou até 6x de R$250,00.</p>
                        <!-- preço parcelado -->
                    </div>

                    <a href="produto.html">
                        <button class="btn-see-more" type="button">Veja mais</button>
                    </a>

                </div>
            </div>
    {% endfor %}
</div>

Jekyll allows you to send HTML together as if it were a kind of "merge" of pages and allows you to send as I sent above. You can send the 2 forms to the customer and he takes care of everything else. This is the most indicated way.

2

An elegant solution would be to use some javascript framework like Vue, Angular and etc..

For they already come with a nice structure to work in such a way.

Since you need different environments on the same page, in the modern web we usually create the web site with concept of componentization. Can be a pleasant solution to your problem.

Example

The best example for this are the direct references on the website of the framework where you can see and read deep on the subject

Community Vue.js

Travel Vue.js Part 1: Building Single Page Applications

Github Vue.js

Official website Vue.js

  • you could give a small example of how it works?

  • I have prepared some references to give starting point from here, read on, understand the concept, make test applications that you will get the hang of. I spoke of Vue because I personally prefer, but there’s Angular and React to take a look too

Browser other questions tagged jquery html html5

You are not signed in. Login or sign up in order to post.