Bir HTML dosyasına başka bir HTML dosyası ekleme

2 HTML dosyam var, diyelim ki a.html ve b.html. a.htmldosyasınab.html` dosyasını dahil etmek istiyorum.

JSF'de bunu böyle yapabilirim:

<ui:include src="b.xhtml" />

Bu, a.xhtml dosyasının içine b.xhtml dosyasını dahil edebileceğim anlamına gelir.

Bunu *.html dosyasında nasıl yapabiliriz?

Çözüm

Bence en iyi çözüm jQuery kullanmaktır:

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>

Bu yöntem benim sorunum için basit ve temiz bir çözüm.

jQuery .load() dokümantasyonu burada yer almaktadır.

Yorumlar (20)

Benim çözümüm yukarıdaki lolo'in çözümüne benziyor. Ancak, HTML kodunu jQuery kullanmak yerine JavaScript'in document.write komutu ile ekliyorum:

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>\
\
');

JQuery kullanmama nedenim, jQuery.js'nin ~90kb boyutunda olması ve yüklenecek veri miktarını olabildiğince küçük tutmak istemem.

Fazla uğraşmadan düzgün bir şekilde kaçmış JavaScript dosyasını elde etmek için aşağıdaki sed komutunu kullanabilirsiniz:

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

Ya da Github'da Gist olarak yayınlanan ve b.html dosyasını b.js dosyasına dönüştürerek gerekli tüm işleri otomatikleştiren aşağıdaki kullanışlı bash betiğini kullanın: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Orijinal sed komutumun dikkate almadığı eğik çizgileri ve tek tırnakları da önleyen geliştirilmiş sed komutu için Greg Minshall'a teşekkür ederiz.

Alternatif olarak template literals destekleyen tarayıcılar için aşağıdaki de çalışır:

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>

`);
Yorumlar (10)

Alternatif olarak, sunucunuzdaki .htaccess dosyasına erişiminiz varsa, php'nin .html uzantısıyla biten dosyalarda yorumlanmasına izin verecek basit bir yönerge ekleyebilirsiniz.

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

Artık aşağıdaki gibi diğer dosyaları dahil etmek için basit bir php betiği kullanabilirsiniz:

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