Saya punya 2 file HTML, misalkan a.html
dan b.html
. Dalam a.html
saya ingin memasukkan b.html
.
Di JSF aku bisa melakukan hal seperti itu:
<ui:include src="b.xhtml" />
Itu berarti bahwa di dalam a.xhtml
file, saya dapat menyertakan b.xhtml
.
Bagaimana kita bisa melakukannya di `*.html file?
Menurut saya solusi terbaik menggunakan 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>
Metode ini sederhana dan bersih solusi untuk masalah saya.
JQuery .beban()
dokumentasi di sini.
Memperluas lolo's jawaban dari atas, di sini adalah sedikit lebih otomasi jika anda harus menyertakan banyak file:
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = 'views/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
Dan kemudian untuk memasukkan sesuatu dalam html:
<div data-include="header"></div>
<div data-include="footer"></div>
Yang akan mencakup file views/header.html dan views/footer.html
Solusi saya adalah mirip dengan salah satu lolo di atas. Namun, saya menyisipkan kode HTML melalui JavaScript's dokumen.menulis bukan menggunakan 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>\
\
');
Alasan saya menggunakan jQuery adalah bahwa jQuery.js adalah ~90kb dalam ukuran, dan saya ingin menyimpan jumlah data untuk beban yang sekecil mungkin.
Dalam rangka untuk mendapatkan yang benar lolos file JavaScript tanpa banyak bekerja, anda dapat menggunakan perintah sed:
sed 's/\\/\\\\/g;s/^.*$/&\\/g;s/'\''/\\'\''/g' b.html > escapedB.html
Atau hanya menggunakan berikut berguna bash script diterbitkan sebagai Inti di Github, yang mengotomatisasi semua pekerjaan yang diperlukan, mengubah b.html
ke b.js
:
https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6
Kredit untuk Greg Minshall untuk meningkatkan perintah sed yang juga lolos ke belakang garis miring dan tanda kutip tunggal, yang asli saya sed perintah tidak mempertimbangkan.
Atau untuk browser yang mendukung template literal berikut ini juga bekerja:
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 impor via Html5rocks tutorial dan di polimer-proyek
Misalnya:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
Shameless plug dari perpustakaan itu saya menulis memecahkan masalah ini.
https://github.com/LexmarkWeb/csi.js
<div data-include="/path/to/include.html"></div>
Di atas akan mengambil isi /path/to/include.html
dan mengganti dengan div
dengan itu.
A sangat tua solusi aku bertemu dengan kebutuhan saya saat itu, tapi di sini's bagaimana untuk melakukannya standar-compliant kode:
<!--[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]-->
Tidak perlu untuk script. Tidak perlu melakukan apapun barang-barang mewah server-side (tho yang mungkin akan menjadi pilihan yang lebih baik)
<iframe src="/path/to/file.html" seamless></iframe>
Sejak lama browser don't mendukung mulus, anda harus menambahkan beberapa css untuk memperbaikinya:
iframe[seamless] {
border: none;
}
Perlu diingat bahwa untuk browser yang don't mendukung mulus, jika anda klik link di iframe itu akan membuat frame pergi ke url tersebut, tidak seluruh jendela. Cara untuk mendapatkan sekitar itu adalah untuk memiliki semua link memiliki target="_parent"
, tho browser support "cukup baik".
Sebagai alternatif, jika anda memiliki akses ke .file htaccess pada server anda, anda dapat menambahkan sederhana direktif yang akan memungkinkan php untuk ditafsirkan pada file yang berakhiran .ekstensi html.
RemoveHandler .html
AddType application/x-httpd-php .php .html
Sekarang anda dapat menggunakan script php sederhana untuk menyertakan file lain seperti:
<?php include('b.html'); ?>
Berikut karya-karya jika konten html dari beberapa file yang harus disertakan: Misalnya, baris berikut ini akan mencakup isi piece_to_include.html di lokasi di mana OBJEK definisi yang terjadi.
...text before...
<OBJECT data="file_to_include.html">
Warning: file_to_include.html could not be included.
</OBJECT>
...text after...
Referensi: http://www.w3.org/TR/WD-html40-970708/struct/includes.html#h-7.7.4
Ini adalah apa yang membantu saya. Untuk menambahkan sebuah blok dari kode html dari b.html
untuk a.html
ini harus pergi ke bagian kepala
tag a.html
:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
Kemudian di tag body, wadah unik yang dibuat dengan id dan blok javascript untuk memuat b.html
ke dalam wadah, sebagai berikut:
<div id="b-placeholder">
</div>
<script>
$(function(){
$("#b-placeholder").load("b.html");
});
</script>
Aku tahu ini adalah waktu yang sangat lama posting, jadi beberapa metode yang tidak tersedia saat itu. Tapi di sini adalah saya sangat sederhana mengambil itu (berdasarkan Lolo's jawaban).
Hal itu bergantung pada HTML5 data* atribut dan oleh karena itu adalah sangat umum dalam yang menggunakan jQuery's untuk masing-masing fungsi untuk mendapatkan pelayanan .kelas pencocokan "beban-html" dan menggunakan masing-masing 'data source' atribut untuk memuat konten:
<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>
Di w3.js termasuk karya-karya seperti ini:
<body>
<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>
<script>w3.includeHTML();</script>
</body>
Untuk deskripsi yang tepat melihat ke dalam ini: https://www.w3schools.com/howto/howto_html_include.asp
Anda dapat menggunakan polyfill HTML Impor (https://www.html5rocks.com/en/tutorials/webcomponents/imports/), atau yang disederhanakan solusi https://github.com/dsheiko/html-import
Misalnya, pada halaman ini anda mengimpor blok HTML seperti:
<link rel="html-import" href="./some-path/block.html" >
Blok dapat memiliki impor sendiri:
<link rel="html-import" href="./some-other-path/other-block.html" >
Importir menggantikan direktif dengan sarat HTML cukup banyak seperti SSI
Perintah ini akan disajikan secara otomatis segera setelah anda memuat kecil ini JavaScript:
<script async src="./src/html-import.js"></script>
Itu akan melakukan proses impor ketika DOM siap secara otomatis. Selain itu, ia memperlihatkan API yang dapat anda gunakan untuk menjalankan secara manual, untuk mendapatkan kayu dan sebagainya. Menikmati :)
Sebagian besar solusi bekerja tetapi mereka memiliki masalah dengan jquery:
Masalah kode berikut $(document).ready(function () { alert($("#includedContent").teks()); }
peringatan apa-apa bukannya memperingatkan termasuk konten.
Aku menulis kode di bawah ini, saya solusi yang dapat anda akses untuk menyertakan konten dalam $(document).siap
fungsi:
(Kunci ini memuat konten disertakan serentak).
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>
sertakan.inc:
<div id="test">
There is no issue between this solution and jquery.
</div>
Yang Athari´s jawaban (pertama!) terlalu banyak konklusif! Sangat Baik!!!
Tapi jika anda ingin lulus nama halaman yang akan dimasukkan sebagai parameter URL, posting ini memiliki solusi yang sangat bagus untuk digunakan dikombinasikan dengan:
http://www.jquerybyexample.net/2012/06/get-url-parameters-using-jquery.html
Sehingga menjadi sesuatu seperti ini:
URL:
www.yoursite.com/a.html?p=b.html
The a.html kode sekarang menjadi:
<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>
Ini bekerja sangat baik bagi saya! Saya harap membantu :)
html5rocks.com memiliki sebuah tutorial yang sangat bagus tentang hal ini, dan ini mungkin sedikit terlambat, tapi aku sendiri tidak't mengetahui ini ada. w3schools juga memiliki cara untuk melakukan hal ini menggunakan perpustakaan baru yang disebut w3.js. Masalahnya adalah, hal ini memerlukan penggunaan web server dan dan HTTPRequest objek. Anda dapat't benar-benar beban ini secara lokal dan menguji mereka pada mesin anda. Apa yang dapat anda lakukan meskipun, adalah menggunakan polyfills yang disediakan di html5rocks link di atas, atau mengikuti tutorial mereka. Dengan sedikit JS sihir, anda dapat melakukan sesuatu seperti ini:
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);
}
Ini akan membuat link (Dapat berubah menjadi ingin link elemen jika sudah ditetapkan), mengatur impor (kecuali jika anda sudah memilikinya), dan kemudian menambahkan. Kemudian dari sana ambil itu dan mengurai file HTML, dan kemudian menambahkan ke elemen yang diinginkan di bawah div. Ini semua dapat berubah sesuai dengan kebutuhan anda dari menambahkan elemen ke link yang anda gunakan. Saya harap ini membantu, mungkin tidak relevan jika baru, cara yang lebih cepat telah keluar tanpa menggunakan library dan framework seperti jQuery atau W3.js.
UPDATE: Ini akan melemparkan kesalahan yang mengatakan bahwa impor lokal telah diblokir oleh CORS kebijakan. Mungkin perlu mengakses deep web untuk dapat menggunakan ini karena sifat dari deep web. (Artinya tidak ada penggunaan praktis)
Tidak ada langsung HTML solusi untuk tugas untuk saat ini. Bahkan HTML Impor (yang secara permanen di draft) tidak akan melakukan hal tersebut, karena Impor != Termasuk dan beberapa JS sihir akan diperlukan pula. Saya baru-baru menulis a VanillaJS script yang hanya untuk inklusi HTML menjadi HTML, tanpa komplikasi.
Hanya di tempat anda a.html
<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>
Itu adalah open-source
dan mungkin memberikan ide (saya harap)
Anda dapat melakukannya dengan JavaScript's perpustakaan jQuery seperti ini:
HTML:
<div class="banner" title="banner.html"></div>
JS:
$(".banner").each(function(){
var inc=$(this);
$.get(inc.attr("title"), function(data){
inc.replaceWith(data);
});
});
Harap dicatat bahwa banner.html
harus berada di bawah domain yang sama anda halaman-halaman lain yang ada di jika halaman web anda akan menolak banner.html
file karena Cross-Origin Resource Sharing kebijakan.
Juga, harap dicatat bahwa jika anda memuat konten anda dengan JavaScript, Google tidak akan mampu indeks begitu itu's tidak tepatnya metode yang baik untuk SEO alasan.