Ik heb 2 HTML-bestanden, stel a.htmlen b.html. In a.htmlwil ik b.htmlopnemen.
In JSF kan ik het zo doen:
<ui:include src="b.xhtml" />
Het betekent dat ik in het a.xhtml-bestand b.xhtmlkan opnemen.
Hoe kunnen we dit doen in het bestand *.html?
Antwoord 1, autoriteit 100%
Naar mijn mening gebruikt de beste oplossing 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>
Deze methode is een eenvoudige en duidelijke oplossing voor mijn probleem.
De jQuery .load()documentatie is hier.
Antwoord 2, autoriteit 25%
Lolo’s antwoord van hierboven uitbreidend, hier is een beetje meer automatisering als je veel bestanden moet opnemen. Gebruik deze JS-code:
$(function () {
var includes = $('[data-include]')
$.each(includes, function () {
var file = 'views/' + $(this).data('include') + '.html'
$(this).load(file)
})
})
En dan om iets in de html op te nemen:
<div data-include="header"></div>
<div data-include="footer"></div>
Welke het bestand views/header.htmlen views/footer.html.
3, Autoriteit 21%
Mijn oplossing is vergelijkbaar met die van lolo boven . Echter, ik steek de HTML-code via document.write JavaScript in plaats van met behulp van 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>\
\
');
De reden voor mij tegen het gebruik van jQuery is dat jquery.js is ~ 90kb in grootte, en ik wil de hoeveelheid gegevens die belasting zo klein mogelijk te houden.
Met het oog op het krijgen goed ontsnapte JavaScript-bestand zonder al te veel werk, kunt u de volgende sed commando te gebruiken:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
Of gewoon gebruik maken van de volgende handige dreunmanuscript gepubliceerd als een Gist op GitHub, dat alle noodzakelijke werkzaamheden automatiseert, het omzetten van b.htmlnaar b.js:
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Kredieten aan Greg Minshall voor de verbeterde sed opdracht die ook ontsnapt back slashes en enkele aanhalingstekens, die mijn origineel sed commando niet heeft onderzocht.
Als alternatief voor browsers die ondersteuning template letterlijke de volgende werkt ook:
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>
`);
4, Autoriteit 12%
afrekenen HTML5 invoer via HTML5ROCKS les
en polymeer-project
Bijvoorbeeld:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
5, Autoriteit 9%
Shameless stekker van een bibliotheek die ik schreef dit op te lossen.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
Het bovenstaande neemt de inhoud van /path/to/include.htmlen vervangt de divermee.
Antwoord 6, autoriteit 7%
Geen scripts nodig. U hoeft geen fancy dingen te doen aan de serverzijde (hoewel dat waarschijnlijk een betere optie zou zijn)
<iframe src="/path/to/file.html" seamless></iframe>
Aangezien oude browsers geen naadloze ondersteuning bieden, moet u wat css toevoegen om dit te verhelpen:
iframe[seamless] {
border: none;
}
Houd er rekening mee dat voor browsers die naadloze ondersteuning niet ondersteunen, als u op een link in het iframe klikt, het framenaar die url gaat, niet naar het hele venster. Een manier om dat te omzeilen is om alle links target="_parent"te hebben, hoewel de browserondersteuning “goed genoeg” is.
Antwoord 7, autoriteit 6%
Een eenvoudige server-side include-instructie om een ander bestand in dezelfde map op te nemen ziet er als volgt uit:
<!--#include virtual="a.html" -->
U kunt ook proberen:
<!--#include file="a.html" -->
Antwoord 8, autoriteit 5%
Een heel oude oplossingdie ik destijds wel aan mijn behoeften voldeed, maar hier is hoe het te doen normconforme code:
<!--[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]-->
Antwoord 9, autoriteit 3%
Het volgende werkt als html-inhoud van een bestand moet worden opgenomen:
De volgende regel bevat bijvoorbeeld de inhoud van piece_to_include.html op de locatie waar de OBJECT-definitie voorkomt.
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
Referentie: http://www.w3.org /TR/WD-html40-970708/struct/includes.html#h-7.7.4
Antwoord 10, autoriteit 2%
Hier is mijn inline-oplossing:
(() => {
const includes = document.getElementsByTagName('include');
[].forEach.call(includes, i => {
let filePath = i.getAttribute('src');
fetch(filePath).then(file => {
file.text().then(content => {
i.insertAdjacentHTML('afterend', content);
i.remove();
});
});
});
})();<p>FOO</p>
<include src="a.html">Loading...</include>
<p>BAR</p>
<include src="b.html">Loading...</include>
<p>TEE</p>Antwoord 11, autoriteit 2%
Als alternatief, als u toegang hebt tot het .htaccess-bestand op uw server, kunt u een eenvoudige richtlijn toevoegen waarmee PHP wordt geïnterpreteerd op bestanden die eindigen in .html-extensie.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Nu kunt u een eenvoudig PHP-script gebruiken om andere bestanden op te nemen, zoals:
<?php include('b.html'); ?>
12, Autoriteit 2%
in w3.js omvatten werken zoals deze:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
Voor de juiste beschrijving Kijk hierin: https://www.w3schools.com/howto/howto_html_include .asp
13
Dit is wat me heeft geholpen. Voor het toevoegen van een blok van HTML-code van b.htmlNAAR a.html, moet dit de headtag van a.html:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
In het lichaamstag wordt een container gemaakt met een uniek ID en een JavaScript-blok om de b.htmlin de container te laden, als volgt:
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
14
Ik weet dat dit een heel oude post is, dus sommige methoden waren toen niet beschikbaar.
Maar hier is mijn heel eenvoudig op zich (gebaseerd op het antwoord van Lolo).
Het is afhankelijk van de HTML5-gegevens- * -attributen en is daarom erg generiek in dat is gebruik van jQuery’s voor elke functie om elke .class-matching “load-html” te krijgen en gebruikt zijn respectieve ‘data-source’ attribuut gebruikt om de Inhoud:
<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>
15
De meeste oplossingen werken, maar ze hebben afgegeven met jQuery :
Het probleem is de volgende code $(document).ready(function () { alert($("#includedContent").text()); }Waarschuwing Niets in plaats van het waarschuwen van inhoud.
Ik schrijf de onderstaande code, in mijn oplossing kunt u toegang hebben tot meegeleverde inhoud in $(document).readyFUNCTION:
(De sleutel wordt geladen inclusief inhoud synchroon).
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>
jQuery inclusief plug-in op GitHub
16
U kunt een Polyfill of HTML-import gebruiken (https: //www.html5Rocks. com / nl / tutorials / webcomponenten / import / ), of die een vereenvoudigde oplossing
https://github.com/dsheiko/html-import
Bijvoorbeeld op de pagina U importeert HTML-blok zoals dat:
<link rel="html-import" href="./some-path/block.html" >
Het blok kan eigen invoer hebben:
<link rel="html-import" href="./some-other-path/other-block.html" >
De importeur vervangt de richtlijn met de geladen HTML vrijwel zoals SSI
Deze richtlijnen worden automatisch geserveerd zodra u dit kleine JavaScript laadt:
<script async src="./src/html-import.js"></script>
Het zal de invoer verwerken wanneer DOM automatisch klaar is. Bovendien legt het een API bloot die u kunt gebruiken om handmatig te rennen, om logboeken enzovoort te krijgen. Geniet van 🙂
17
Inhoud van het benoemde bestand invoegen:
<!--#include virtual="filename.htm"-->
18
Heeft u een iframe-injectie geprobeerd?
Het injecteert de IFRAME in het document en verwijdert zichzelf (het moet dan in de HTML DOM zijn)
<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
Regards
19
html5rocks.com heeft een zeer goede tutorial over dit spul, En dit is misschien een beetje laat, maar ik wist niet dat dit bestond. W3schools heeft ook een manier om dit te doen met behulp van hun nieuwe bibliotheek genaamd W3.JS. Het ding is, dit vereist het gebruik van een webserver en en HTTPREQUEST-object. Je kunt deze niet echt lokaal laden en ze op je machine testen. Wat u maar kunt doen, is Polyfills gebruikt op de link HTML5ROCKS aan de bovenkant of volg hun tutorial. Met een kleine JS-magie kun je zoiets doen:
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);
}
Hierdoor wordt de link (kan veranderen in het gewenste linkelement als al ingesteld), stel de import in (tenzij u het al hebt), en vervolgens bijvoegen. Het neemt dan van daaruit en verminder het bestand in HTML en voegt het vervolgens toe aan het gewenste element onder een div. Dit kan allemaal worden gewijzigd om aan uw behoeften te voldoen vanuit het toevoegende element op de link die u gebruikt. Ik hoop dat dit heeft geholpen, het kan nu irrelevant, als nieuwere, snellere manieren zijn uitgekomen zonder bibliotheken en kaders zoals jQuery of w3.js te gebruiken.
UPDATE: Hiermee wordt een fout opgetreden wat zegt dat de lokale import is geblokkeerd door CORS-beleid. Kan toegang hebben tot het diepe web om dit te kunnen gebruiken vanwege de eigenschappen van het diepe web. (Betekenis geen praktisch gebruik)
20
Hier is mijn aanpak met behulp van Fetch API en Async-functie
<div class="js-component" data-name="header" data-ext="html"></div>
<div class="js-component" data-name="footer" data-ext="html"></div>
<script>
const components = document.querySelectorAll('.js-component')
const loadComponent = async c => {
const { name, ext } = c.dataset
const response = await fetch(`${name}.${ext}`)
const html = await response.text()
c.innerHTML = html
}
[...components].forEach(loadComponent)
</script>
21
Er is geen directe HTML-oplossing voor de taak voor nu. Zelfs HTML imports (die permanent in de concept is) Niet doen, omdat import! = omvatten en sommige JS-magie is toch nodig.
Ik schreef onlangs a vanillejs script dat is alleen voor inclusie HTML in HTML, zonder complicaties.
Plaats gewoon in uw a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
Het is open-sourceen kan een idee geven (ik hoop)
22
U kunt dat doen met Javascript’s Library JQuery als deze:
HTML:
<div class="banner" title="banner.html"></div>
JS:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
Houd er rekening mee dat banner.htmlmoet worden gevonden onder hetzelfde domein, uw andere pagina’s zijn anders in uw webpagina’s weigeren uw webpagina’s de banner.htmlbestand als gevolg van cross-origin resource delen beleid.
Houd er ook rekening mee dat als u uw inhoud met JavaScript laadt, Google het niet kan indexeren, dus het is niet bepaald een goede methode om redenen.
23
een andere aanpak met behulp van FETCH API met belofte
<html>
<body>
<div class="root" data-content="partial.html">
<script>
const root = document.querySelector('.root')
const link = root.dataset.content;
fetch(link)
.then(function (response) {
return response.text();
})
.then(function (html) {
root.innerHTML = html;
});
</script>
</body>
</html>
Antwoord 24
Webcomponenten
Ik maak de volgende webcomponentvergelijkbaar met JSF
<ui-include src="b.xhtml"><ui-include>
U kunt uhet gebruiken als normale html-tag in uw pagina’s (na het opnemen van snippet js code)
Antwoord 25
Gebruik includeHTML(kleinste js-lib: ~150 regels)
HTML-onderdelen laden via HTML-tag (pure js)
Ondersteunde belasting: async/sync, elke diepe recursieve bevat
Ondersteunde protocollen: http://, https://, file:///
Ondersteunde browsers: IE 9+, FF, Chrome (en mogelijk andere)
GEBRUIK:
1.Insert includeHTMLin head-sectie (of vóór body close-tag) in HTML-bestand:
<script src="js/includeHTML.js"></script>
2.Gebruik overal includeHTMLals HTML-tag:
<div data-src="header.html"></div>
Antwoord 26
Hier is een geweldig artikel, u kunt een gemeenschappelijke bibliotheek implementeren en gebruik onderstaande code om HTML-bestanden op één regel te importeren.
<head>
<link rel="import" href="warnings.html">
</head>
U kunt ook Google polymeer
27
Gebruik ES6 Backticks “: Sjabloonlettergebruikers !
let nick = "Castor", name = "Moon", nuts = 1
more.innerHTML = `
<h1>Hello ${nick} ${name}!</h1>
You collected ${nuts} nuts so far!
<hr>
Double it and get ${nuts + nuts} nuts!!
` <div id="more"></div>28
Om oplossing te krijgen, moet u het bestand csi.min.js opnemen, wat u kunt vinden hier .
Zoals het voorbeeld op GitHub, om deze bibliotheek te gebruiken, moet u het bestand CSI.JS in uw pagina-koptekst opnemen, dan moet u de gegevens toevoegen-ADDIBUTE met zijn waarde ingesteld op het bestand dat u wilt opnemen, op het containerelement.
Copy Code verbergen
<html>
<head>
<script src="csi.js"></script>
</head>
<body>
<div data-include="Test.html"></div>
</body>
</html>
… hoop dat het helpt.
29
Ik heb nog een oplossing om dit te doen
Ajax gebruiken in Javascript
Hier is de uitgelegd code in GitHub Repo
https://github.com/dupinder/staticHTML-Include
basisidee is:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='main.js'></script>
</head>
<body>
<header></header>
<footer></footer>
</body>
</html>
main.js
fetch("./header.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("header").innerHTML = data;
});
fetch("./footer.html")
.then(response => {
return response.text()
})
.then(data => {
document.querySelector("footer").innerHTML = data;
});