Include another HTML file in an HTML file

27

Scenario: I'm setting up a layout, which will be used by third parties and I do not know what language will be used. I have two divs, one will be the left menu and the other the content. They are separated by a Splitter , my questions are:

  • This left menu, I want to develop a html part and call it by include , what is the best way to do it?

  • If I make a call via javascript, I will have problems with javascript contained on this page to be inserted?

  • Is there any such standard in HTML5 , CSS or some form simple to implement in JavaScript ?

  • I know iframe is not a good solution. Through <object type="text/html" data="include.html"></object> , it works but I think it's not a good solution either.

        
    asked by anonymous 11.04.2014 / 21:33

    4 answers

    31

    If you are 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.hml" -->
    
        
    11.04.2014 / 21:55
    16

    I do not know if I understand correctly, but if so, and how you tagged the tag , so why not use load :

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

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

        
    11.04.2014 / 22:02
    5

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

    Jekyll example:

    <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 the HTML together as if it were a sort of "merge" of pages and allows you to send as I sent up. You can send the 2 forms to the customer and he takes care of everything else. This is the most appropriate way.

        
    11.04.2014 / 21:50
    2

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

    Well, they already have a nice structure to work with in such a way.

    Since you need different environments on the same page, in the modern web we usually create the web site with componentization . It can be a nice solution to your problem.

    Example

    The best example for this is the direct references on the framework website where you can see and read about it

    Vue.js Community

    Course Vue.js part 1: Building Single Page Applications

    Github Vue.js

    Official Site Vue.js

        
    25.08.2017 / 21:27