Am 2 fisiere HTML, presupun a.html " și " b.html
. În a.htmlvreau să includ
b.html`.
În JSF pot face asta:
<ui:include src="b.xhtml" />
Aceasta înseamnă că în interiorul o.xhtml
de fișiere pot include b.xhtml
.
Cum putem face asta în `*.html file?
În opinia mea, cea mai bună soluție foloseste jQuery:
a.html
:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
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:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
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:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
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 înlocui
div` cu ea.
O foarte vechi soluție am întâlnit nevoile mele de atunci, dar aici's cum se face că respectă standardele de cod:
<!--[if IE]>
<object classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13" data="some.html">
<p>backup content</p>
</object>
<![endif]-->
<!--[if !IE]> <-->
<object type="text/html" data="some.html">
<p>backup content</p>
</object>
<!--> <![endif]-->
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ă)
<iframe src="/path/to/file.html" seamless></iframe>
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...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...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" eticheta
a.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:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
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:
<link rel="html-import" href="./some-path/block.html" >
Blocul poate fi importurile de propriile sale:
<link rel="html-import" href="./some-other-path/other-block.html" >
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:
<html>
<head>
<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>
</head>
<body>
<script>$.include("include.inc");</script>
</body>
</html>
include.inc:
<div id="test">
There is no issue between this solution and jquery.
</div>
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:
<html>
<head>
<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>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
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`
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<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 refuza
banner.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.