Include un alt fișier HTML într-un fișier HTML

În opinia mea, cea mai bună soluție foloseste jQuery:

a.html:

    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("b.html"); 
    });
    </script> 



     <div id="includedContent"></div>

b.html:

<p>This is my include file</p>

Această metodă este un simplu și curat soluție la problema mea.

JQuery .load() documentația este aici.

Extinderea lolo's răspunsul de mai sus, aici este un pic mai mult de automatizare dacă trebuie să includă o mulțime de fișiere:

<script>
  $(function(){
    var includes = $('[data-include]');
    jQuery.each(includes, function(){
      var file = 'views/' + $(this).data('include') + '.html';
      $(this).load(file);
    });
  });
</script>

Și apoi să includă ceva in html:

<div data-include="header"></div>
<div data-include="footer"></div>

Care ar include fișierul views/header.html și views/footer.html

Soluția mea este similar cu cel al lolo de mai sus. Cu toate acestea, am inserați codul HTML prin intermediul JavaScript's documentului.scrie în loc de a folosi jQuery:

a.html:

  <h1>Put your HTML content before insertion of b.js.</h1>
      ...

  <script src="b.js"></script>

      ...

  <p>And whatever content you want afterwards.</p>

b.js:

document.write('\
\
    <h1>Add your HTML code here</h1>\
\
     <p>Notice however, that you have to escape LF's with a '\', just like\
        demonstrated in this code listing.\
    </p>\
\
');

Motiv pentru mine împotriva folosind jQuery este că jQuery.js este ~90kb în dimensiune, și vreau să-l păstrați cantitatea de date pentru a încărca cât mai mic posibil.

În scopul de a obține în mod corespunzător a scăpat JavaScript fișier fără de mult de lucru, puteți utiliza următoarele sed comanda:

sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html

Sau de a folosi doar următoarele îndemână script bash publicat ca o esență pe Github, care automatizează toate lucrările necesare, de conversie b.html la b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Credite Greg Minshall pentru îmbunătățirea sed comanda, de asemenea, că scapă înapoi oblice și ghilimele simple, pe care mi-original sed comanda nu a luat în considerare.

Alternativ pentru browserele care acceptă șablon literali, de asemenea, următoarele lucrări:

b.js:

document.write(`

    <h1>Add your HTML code here</h1>

     <p>Notice, you do not have to escape LF's with a '\',
        like demonstrated in the above code listing.
    </p>

`);

Checkout HTML5 importurilor prin Html5rocks tutorial și la polimer-proiect

De exemplu:

Shameless plug de o bibliotecă pe care am scris rezolva acest lucru.

https://github.com/LexmarkWeb/csi.js

<div data-include="/path/to/include.html"></div>

Cele de mai sus va avea conținutul /path/to/include.html și înlocuidiv` cu ea.

Un simplu server side include directive pentru a include un alt fișier găsit în același dosar arata ca acest lucru:

O foarte vechi soluție am întâlnit nevoile mele de atunci, dar aici's cum se face că respectă standardele de cod:

<p>backup content</p>

Nu este nevoie pentru script-uri. Nu este nevoie de a face orice lucruri de lux server-side (tho, care ar fi, probabil, o opțiune mai bună)

Deoarece browserele vechi nu't suport fără sudură, ar trebui să adăugați unele css pentru a remedia problema:

iframe[seamless] {
    border: none;
}

Păstrați în minte că pentru browserele care nu't suport fără sudură, dacă faceți clic pe un link-ul din iframe-ul se va face frame du-te la url-ul, nu toată fereastra. O modalitate de a obține în jurul valorii de care este de a avea toate link-urile au target="_parent", tho browser-ul de sprijin este "destul de bun".

Ca o alternativă, dacă aveți acces la .htaccess de pe server, puteți adăuga o simplă directivă care va permite php pentru a fi interpretate la fișierele care se termină în .html extensie.

RemoveHandler .html
AddType application/x-httpd-php .php .html

Acum puteți utiliza un simplu script php pentru a include și alte fișiere, cum ar fi:

<?php include('b.html'); ?>

Următoarele lucrări daca html-conținut dintr-un fișier trebuie să fie incluse: De exemplu, următoarea linie va include conținutul de piece_to_include.html la locul unde definiția OBIECTULUI apare.

...text before...

Warning: file_to_include.html could not be included.

...text after...

Referință: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4

Aceasta este ceea ce m-a ajutat. Pentru a adăuga un bloc de cod html de la b.html " la "a.html, acest lucru ar trebui să meargă în "capul" etichetaa.html`:

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

Apoi, în tag-ul body, un container se face cu un id unic și un bloc javascript pentru a încărca b.html în container, după cum urmează:

<div id="b-placeholder">

</div>

<script>
$(function(){
  $("#b-placeholder").load("b.html");
});
</script>

Știu că acest lucru este un foarte vechi post, astfel încât unele metode nu au fost disponibile atunci. Dar aici este foarte simplu lua pe ea (pe baza Lolo's de răspuns).

Ea se bazează pe date HTML5-* atribute și, prin urmare, este foarte generic în care se utilizează jQuery's pentru fiecare funcție pentru a obține fiecare .clasa de potrivire "încărcați-html" și utilizările sale respective 'date-sursă' atribut pentru a încărca conținut:

<div class="container-fluid">
    <div class="load-html" id="NavigationMenu" data-source="header.html"></div>
    <div class="load-html" id="MainBody" data-source="body.html"></div>
    <div class="load-html" id="Footer" data-source="footer.html"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
$(function () {
    $(".load-html").each(function () {
        $(this).load(this.dataset.source);
    });
});
</script>

În w3.js include funcționează ca aceasta:

<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>

Pentru buna descriere uită-te la asta: https://www.w3schools.com/howto/howto_html_include.asp

Puteți utiliza un polyfill de HTML Importurilor (https://www.html5rocks.com/en/tutorials/webcomponents/imports/), sau ca soluții simplificate https://github.com/dsheiko/html-import

De exemplu, pe pagina de import HTML bloc de genul asta:

Blocul poate fi importurile de propriile sale:

Importator înlocuiește directiva încărcată HTML destul de mult ca SSI

Aceste directive vor fi servite în mod automat de îndată ce vă încărcați acest mic JavaScript:

<script async src="./src/html-import.js"></script>

Acesta va procesa importurile de când DOM este pregătit în mod automat. În plus, acesta expune un API pe care le puteți folosi pentru a rula manual, pentru a obține jurnalele și așa mai departe. Bucurați-vă de :)

Cele mai multe dintre soluțiile funcționează, dar au problema cu jquery:

Problema este următorul cod $(document).ready(function () { alert($("#includedContent").text()); } alerte nimic în loc de alertare inclus conținut.

Am scris codul de mai jos, în soluție, puteți accesa conținut incluse în `$(document).gata funcția:

(Cheia este de încărcare inclus conținutul sincron).

index.htm:

        <script src="jquery.js"></script>

        <script>
            (function ($) {
                $.include = function (url) {
                    $.ajax({
                        url: url,
                        async: false,
                        success: function (result) {
                            document.write(result);
                        }
                    });
                };
            }(jQuery));
        </script>

        <script>
            $(document).ready(function () {
                alert($("#test").text());
            });
        </script>



        <script>$.include("include.inc");</script>

include.inc:

<div id="test">
    There is no issue between this solution and jquery.
</div>

includ jquery plugin-ul de pe github

Pentru a introduce conținutul de nume de fișier:

La Athari´s răspuns (primul!) a fost prea mult concludente! Foarte Bun!

Dar dacă doriți să se trece numele paginii să fie inclus ca parametru URL, acest post are o foarte frumos soluție să fie folosit în combinație cu:

http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html

Așa că devine ceva de genul asta:

URL-ul dvs.:

www.yoursite.com/a.html?p=b.html

La a.html codul devine acum:

    <script src="jquery.js"></script> 
    <script> 
    function GetURLParameter(sParam)
    {
      var sPageURL = window.location.search.substring(1);
      var sURLVariables = sPageURL.split('&');
      for (var i = 0; i < sURLVariables.length; i++) 
      {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
      }
    }​
    $(function(){
      var pinc = GetURLParameter('p');
      $("#includedContent").load(pinc); 
    });
    </script> 



     <div id="includedContent"></div>

Ea a lucrat foarte bine pentru mine! Sper ca am ajutat :)

html5rocks.com are un tutorial foarte bun la chestia asta, iar acest lucru ar putea fi un pic mai târziu, dar m-am n't știu acest lucru a existat. w3schools are, de asemenea, o modalitate de a face acest lucru cu ajutorul lor noi de bibliotecă numit w3.js. Lucru este, acest lucru necesită utilizarea unui server web și HTTPRequest și obiect. Puteți't de fapt încărcarea acestora la nivel local și de a le testa pe masina ta. Ce poti face insa, este utilizarea polyfills furnizate pe html5rocks link-ul de la partea de sus, sau urmați tutorial. Cu un pic de JS magie, puteți face ceva de genul asta:

 var link = document.createElement('link');
 if('import' in link){
     //Run import code
     link.setAttribute('rel','import');
     link.setAttribute('href',importPath);
     document.getElementsByTagName('head')[0].appendChild(link);
     //Create a phantom element to append the import document text to
     link = document.querySelector('link[rel="import"]');
     var docText = document.createElement('div');
     docText.innerHTML = link.import;
     element.appendChild(docText.cloneNode(true));
 } else {
     //Imports aren't supported, so call polyfill
     importPolyfill(importPath);
 }

Acest lucru va face link-ul (se Poate schimba pentru a fi vrut element de legătură dacă este deja setat), stabilit de import (dacă nu le aveți deja), și apoi adăugați-l. Acesta va apoi de acolo ia și analiza fișier în HTML, și apoi adăugați-l la elementul dorit sub un div. Acest lucru poate fi schimbat pentru a se potrivi nevoilor dumneavoastră de la anexarea element la link-ul pe care îl utilizați. Sper că acest lucru a ajutat, poate irelevant acum, dacă noi, moduri de repede au venit, fără utilizarea de biblioteci și cadrele precum jQuery sau W3.js.

ACTUALIZARE: Acest lucru va arunca o eroare spunând că la nivel local de import a fost blocat de CORS politică. S-ar putea nevoie de acces la deep web pentru a fi capabil de a utiliza acest lucru pentru că proprietățile de deep web. (Adica nici utilizarea practică)

Nu există nici direct HTML soluție pentru sarcina de acum. Chiar HTML Importurile (care este permanent în proiect) nu va face acest lucru, deoarece Import != Includ și unele JS magie vor fi necesare oricum. Am scris recent o VanillaJS script, care este doar pentru includerea HTML în HTML, fără complicații.

Doar locul în a.html`

<script src="wm-html-include.js"> </script>  

Este open-source si poate da o idee (sper)

Poti face asta cu JavaScript's biblioteca jQuery astfel:

HTML:

<div class="banner" title="banner.html"></div>

JS:

$(".banner").each(function(){
    var inc=$(this);
    $.get(inc.attr("title"), function(data){
        inc.replaceWith(data);
    });
});

Vă rugăm să rețineți că banner.htmlar trebui să fie situate în același domeniu alte pagini sunt altfel în paginile dvs. web va refuzabanner.html file din Cross-Origin Resource Sharing politici.

De asemenea, vă rugăm să rețineți că, dacă vă încărcați conținutul dvs. cu JavaScript, Google nu va fi în măsură să indice că așa l'nu e chiar o metoda buna din motive de SEO.