Sertakan file HTML lain dalam file HTML

627

Saya punya 2 file HTML, misalkan a.htmldan b.html. Dalam a.htmlsaya ingin memasukkan b.html.

Di JSF saya bisa melakukannya seperti itu:

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

Ini berarti bahwa di dalam a.xhtmlfile, saya dapat memasukkan b.xhtml.

Bagaimana kita melakukannya dalam *.htmlfile?

javascript html include lolo
sumber

5

kemungkinan rangkap dari Setara dengan cantuman () dalam HTML

Wesley Murch

32

TIDAK! 2 hal berbeda!

lolo

terkait, tetapi untuk localhost: stackoverflow.com/questions/7542872/…

cregox

MarMarAba

Lihat Modul HTML github.com/w3c/webcomponents/blob/gh-pages/proposals/… dan groups.google.com/a/chromium.org/forum/#!msg/blink-dev/… dan github.com/w3c / webcomponents / gumpalan / gh-halaman / proposal / ... dan diskusi latar belakang di github.com/w3c/webcomponents/issues/645 dan beberapa masalah diskusi di github.com/w3c/webcomponents/issues/783

sideshowbarker

687

Menurut pendapat 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 adalah solusi sederhana dan bersih untuk masalah saya.

.load()Dokumentasi jQuery ada di sini .

lolo
sumber

5

Apa bedanya hanya melakukan ini `<script> $ (" # IncludedContent "). Load (" b.html "); </script>?

Rodrigo Ruiz

10

@RodrigoRuiz $(function(){})hanya akan dijalankan setelah dokumen selesai dimuat.

LABA

8

Jika file HTML yang disertakan memiliki CSS yang melekat padanya, itu mungkin mengacaukan gaya halaman Anda.

Omar Jaafor

6

Saya persis seperti yang Anda sebutkan. Saya menggunakan bootstrap dan menimpa css untuk B.html. Ketika saya menggunakan B.html dalam A.html sehingga akan berakhir sebagai header A.html, saya dapat melihat bahwa css telah kehilangan prioritasnya dan memiliki tata letak yang berbeda. Ada solusi untuk ini?

Pavan Dittakavi

38

Ini memang membutuhkan server . Saat menggunakannya pada file lokal:

XMLHttpRequest cannot load file:///.../b.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Basj

155

Memperluas jawaban lolo dari atas, berikut ini sedikit otomatisasi jika Anda harus memasukkan 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 memasukkan sesuatu ke dalam html:

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

Yang akan mencakup tampilan file / header.html dan tampilan / footer.html

mhanisch
sumber

Sangat berguna. Apakah ada cara untuk melewatkan argumen melalui parameter data lain, suka data-argumentdan mengambilnya dalam file yang disertakan?

chris

@ Chris Anda dapat menggunakan GET params misalnya$("#postdiv").load('posts.php?name=Test&age=25');

Nam G VU

5

Saran kecil - Anda tidak perlu class="include"- buat saja pemilih jQueryvar includes = $('[data-include]');

jbyrd

tidak bekerja pada chrome dengan file lokal "Permintaan lintas asal hanya didukung untuk skema protokol: htt"

Artem Bernatskyi

2

@ArtemBernatskyi Apakah itu membantu, ketika Anda menjalankan server lokal saja? Berikut ini adalah tutorial yang mudah: developer.mozilla.org/en-US/docs/Learn/Common_questions/…

mhanisch

146

Solusi saya mirip dengan salah satu lolo di atas. Namun, saya memasukkan kode HTML melalui dokumen JavaScript. Menulis alih-alih 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 tidak menggunakan jQuery adalah karena jQuery.js berukuran ~ 90kb, dan saya ingin menjaga jumlah data yang dimuat sekecil mungkin.

Untuk mendapatkan file JavaScript yang lolos dengan benar tanpa banyak pekerjaan, Anda dapat menggunakan perintah sed berikut:

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

Atau cukup gunakan skrip bash praktis berikut yang diterbitkan sebagai Inti pada Github, yang mengotomatiskan semua pekerjaan yang diperlukan, mengonversi b.htmlke b.js: https://gist.github.com/Tafkadasoh/334881e18cbb7fc2a5c033bfa03f6ee6

Penghargaan untuk Greg Minshall untuk perintah sed yang ditingkatkan yang juga lolos dari garis miring dan kutipan tunggal, yang tidak dipertimbangkan oleh perintah sed asli saya.

Atau untuk browser yang mendukung literal templat , yang berikut ini juga berfungsi:

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>

`);

Tafkadasoh
sumber

4

@ TrevorHickey Ya, Anda benar, itulah kelemahan solusi saya, dan itu tidak terlalu elegan. Namun, karena Anda dapat memasukkan '\' dengan regex sederhana di akhir setiap baris, ini berfungsi baik untuk saya. Hmm ... mungkin saya harus menambahkan jawaban saya bagaimana melakukan penyisipan melalui regex ...

Tafkadasoh

2

Astaga, itu jelek - tidak, terima kasih. Saya lebih suka menulis html saya sebagai html. Saya tidak peduli apakah saya dapat menggunakan sed pada baris perintah - Saya tidak ingin harus bergantung pada itu setiap kali saya mengubah isi template.

jbyrd

1

@Goodra Ini seharusnya berfungsi pada HTML apa pun tanpa 'tanda di dalamnya. Jika Anda hanya melakukan find / replace untuk mengganti ` with \ `THEN find / replace untuk mengganti 'dengan \'dan baris baru dengan` `baris baru, itu akan berfungsi dengan baik.

wizzwizz4

1

@ wizzwizz4: Terima kasih kepada Greg, perintah sed sekarang juga lolos dari tanda kutip tunggal dan garis miring terbalik. Selanjutnya, saya telah menambahkan skrip bash yang melakukan semua pekerjaan untuk Anda. :-)

Tafkadasoh

1

Anda dapat menggunakan backticks `- maka Anda dapat memasukkan ekspresi seperti ${var}- Anda hanya perlu melarikan diri \`dan\$

inetphantom

85

Checkout impor HTML5 melalui tutorial Html5rocks dan di proyek-polimer

Sebagai contoh:

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

pengguna1587439
sumber

27

Impor HTML tidak dimaksudkan untuk benar-benar memasukkan konten dalam halaman secara langsung. Kode dalam jawaban ini hanya stuff.htmltersedia sebagai templat di dalam halaman induk, tetapi Anda harus menggunakan skrip untuk membuat klon DOM-nya di halaman induk sehingga dapat dilihat oleh pengguna.

waldyrious

1

Instruksi di html5rocks.com untuk memasukkan konten dari satu halaman HTML ke halaman lain tampaknya belum berfungsi di banyak browser. Saya mencobanya di Opera 12.16 dan Superbird Versi 32.0.1700.7 (233448) tanpa efek (di Xubuntu 15.04). Saya dengar itu tidak berfungsi di Firefox (karena bug yang diharapkan telah diperbaiki) atau banyak versi Chrome. Jadi, meskipun sepertinya ini adalah solusi ideal di masa depan, itu bukan solusi lintas-browser.

Brōtsyorfuzthrāx

1

Tampaknya belum siap pada akhir 2016 di FireFox (45.5.1 ESR). JS konsol mengatakan: TypeError: ... .import is undefined. MDN mengatakan "Fitur ini tidak diterapkan di browser mana pun secara asli saat ini." Adakah yang tahu kalau bisa membuat FF dengan fitur ini?

sphakka

3

Firefox tidak akan mendukungnya. Untuk mengaktifkannya coba atur "dom.webcomponents.enabled". Ini hanya akan berfungsi di Chrome dan Opera, Android dengan tampilan web yang dapat diperbarui (mulai 4.4.3). Browser Apple tidak mendukungnya. Sepertinya ide yang bagus untuk komponen web tetapi belum diimplementasikan secara luas.

Maxim

9

Pembaruan akhir tahun 2018: Impor HTML tampaknya tidak digunakan lagi karena alasan tertentu

V. Rubinetti

60

Plug tak tahu malu dari perpustakaan yang saya tulis menyelesaikan ini.

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

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

Di atas akan mengambil konten /path/to/include.htmldan menggantinya div.

Michael Marr
sumber

4

Apakah ini akan mengevaluasi JavaScript jika include.html telah disematkan?

Seth

1

@ Sepertinya tidak. Saya akan bermain-main dengan src dan melihat apakah saya bisa membuatnya melakukannya. Terima kasih kepada michael-marr

xandout

2

Cemerlang!!!! Tampaknya Anda satu-satunya solusi yang MENGGANTI tag div yang digunakan sebagai token tempat memasukkan. Aku akan mempelajari sumbernya nanti !! :-)

kpollock

1

terima kasih ini bekerja, ini termasuk HTML / CSS tetapi bukan Javascript dari file sumber. Anda hanya perlu memasukkannya lagi di mana pun Anda menggunakan <div data-include="/path/to/include.html"></div>. Alat ini membuatnya lebih mudah untuk membuat mockup multi-plugin sederhana tanpa plugin dengan cara yang bersih.

Vincent Tang

1

dapatkah saya menggunakan lib ini dalam aplikasi apa pun? Maksud saya, bagaimana bisa menghargai penulis? W3School memiliki solusi yang serupa, hanya bedanya bahwa kode Anda melayani panggilan rekursif pada beban jendela juga .... w3schools.com/howto/tryit.asp?filename=tryhow_html_include_1

yeppe

43

Sisi server sederhana termasuk arahan untuk memasukkan file lain yang ditemukan di folder yang sama terlihat seperti ini:

<!--#include virtual="a.html" -->

Webdesign7 London
sumber

21

Anda perlu mengkonfigurasi server Anda untuk menggunakan SSI

lolo

7

Berikut ini adalah referensi untuk mengkonfigurasi SSI untuk server Anda: httpd.apache.org/docs/2.4/howto/ssi.html#configuring

shasi kanth

Mungkin patut dicoba juga

jimmyjudas

Penyertaan SSI membuat Web-Server sedikit lebih lambat (jadi harus dihindari sampai kebutuhan mutlak).

Amit Verma

36

Tidak perlu skrip. Tidak perlu melakukan hal-hal sisi server mewah (tho yang mungkin akan menjadi pilihan yang lebih baik)

<iframe src="/path/to/file.html" seamless></iframe>

Karena browser lama tidak mendukung mulus, Anda harus menambahkan beberapa css untuk memperbaikinya:

iframe[seamless] {
    border: none;
}

Perlu diingat bahwa untuk peramban yang tidak mendukung mulus, jika Anda mengklik tautan di iframe itu akan membuat bingkai masuk ke url itu, bukan keseluruhan jendela. Cara untuk menyiasatinya adalah dengan memiliki semua tautan target="_parent", sehingga dukungan peramban "cukup baik".

bjb568
sumber

7

itu tampaknya tidak menerapkan gaya css dari halaman induk misalnya.

Randy

5

@Randy Jadi? Ini dapat dihitung sebagai nilai tambah (terutama untuk konten yang dibuat pengguna dan sejenisnya). Anda dapat dengan mudah memasukkan file css lagi tanpa membuat permintaan lain karena caching.

bjb568

Menjawab kebutuhan saya untuk jawaban atas pertanyaan ini - bagaimana cara memasukkan file html dalam file html lain ...

Grimxn

2

Itu jawaban terbaik TANPA JQuery atau skrip. Bagus bjb568 terima kasih!

DBS

12

The seamlessatribut telah dihapus dari draft HTML asalnya. Jangan gunakan itu.

Mitja

33

Sebuah solusi yang sangat lama saya memang memenuhi kebutuhan saya saat itu, tapi inilah cara melakukannya dengan kode yang sesuai standar:

<!--[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]-->

Aleksandar Vacić
sumber

9

Tampaknya <object>, <embed>dan <iframe>semua berfungsi untuk ini, tetapi dalam ketiga kasus mereka membuat dokumen terpisah dengan gaya penataan dan penulisan skrip mereka sendiri (iframe khususnya mencakup batas dan bilah gulir yang jelek), dan misalnya semua tautan secara default terbuka di dalamnya daripada di halaman induk (meskipun ini dapat diganti dengan target = "_ parent"). Dari semua ini, iframe adalah satu-satunya yang memiliki beberapa harapan menjadi lebih terintegrasi melalui HTML5 seamlessatribut (disebutkan oleh bjb568), tapi itu belum didukung: caniuse.com/#feat=iframe-seamless

waldyrious

2

iframe-seamless telah dihapus dari standar HTML: github.com/whatwg/html/issues/331 . Jadi @waldyrious komentar tidak lagi benar (pikiran untuk memperbaruinya komentar Anda?)

Tomáš Pospíšek

1

Terima kasih untuk informasi selanjutnya, @ TomášPospíšek. Saya tidak dapat mengedit komentar saya lagi, tetapi semoga respons Anda memberikan peringatan yang diperlukan untuk pembaca. Agar lebih jelas, kalimat terakhir (tentang seamlessatribut) adalah satu-satunya bagian yang ketinggalan jaman - sisanya masih berlaku.

waldyrious

17

Sebagai alternatif, jika Anda memiliki akses ke file .htaccess di server Anda, Anda dapat menambahkan arahan sederhana yang akan memungkinkan php ditafsirkan pada file yang diakhiri dengan ekstensi .html.

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

Sekarang Anda dapat menggunakan skrip php sederhana untuk memasukkan file lain seperti:

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

rtd1123
sumber

28

Ya itu saran yang sangat buruk. File html bersifat statis, dan dilayani oleh apache dengan sangat cepat. Jika Anda menambahkan semua file html ke parser php hanya untuk memasukkan file, Anda akan memiliki banyak masalah kinerja di server Anda. Cara javascript (jQuery atau plain JS) bukan solusi yang sangat baik, tetapi mereka masih jauh lebih efisien dan kurang berbahaya daripada yang satu ini.

Gfra54

@ Gfra54 Apakah maksud Anda bahwa kami akan memiliki masalah kinerja jika kami hanya menggunakan Apache untuk ini, dan kami tidak melakukan pekerjaan php untuk situs ini? Atau akankah ini melambat jika saya menggunakan php dan hal ini bersamaan?

user3459110

1

Perhatian: Menambahkan baris ini ke .htaccessdapat menyebabkan htmlhalaman mencoba mengunduh sebagai file daripada melihat di browser. Tes dulu. Penafian: Itu baru saja terjadi pada saya ketika saya mencoba solusi di atas. Saya .htaccesskosong kecuali untuk dua baris di atas. Perhatian disarankan. Coba lolosolusi jQuery (di bawah) sebagai gantinya.

cssyphus

Lelaki itu aku menyulitkan diriku meskipun aku telah melakukannya sebelumnya. Terima kasih atas pengingatnya. Untuk keperluan yang saya butuhkan itu tidak terlalu mempengaruhi kinerja jadi saya keren.

Gman

Ha jawaban yang menghancurkan kinerja ini adalah contoh luar biasa dari pemikiran di luar kotak Saya tidak akan menyarankan itu, tapi mungkin penyelamat ketika Anda membutuhkan sedikit palu godam php. :-)

moodboom

14

Berikut berfungsi jika konten html dari beberapa file perlu disertakan: Misalnya, baris berikut akan menyertakan konten piece_to_include.html di lokasi di mana definisi OBJECT 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

Cowok keren
sumber

2

Bekerja seperti pesona dan itu solusi terbersih. Ini harus menjadi jawaban yang diterima.

vbocan

Setuju. Hanya satu catatan: jangan mencoba melakukan tag objek yang menutup sendiri. Teks setelah itu akan terhapus.

Sridhar Sarnobat

Tampaknya membuat "#dokumen" baru yang secara otomatis berisi tag <html> dan <body> yang baru disarangkan. Ini tidak berfungsi untuk tujuan saya; File .html saya berisi tag <script src = "..." type = "text / javascript">; tetapi JS mendapat kesalahan referensi baru.

IAM_AL_X

12

Inilah solusi di tempat saya:

(() => {
    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>

Luaskan cuplikan

Mustafa Burak Kalkan
sumber

1

woow, ini lebih sederhana

Arian saputra

Solusi yang sangat bagus dan sederhana, terima kasih ^^

Remling

11

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 lihat ini: https://www.w3schools.com/howto/howto_html_include.asp

Kaj Risberg
sumber

Jika Anda ingin tahu kapan dokumen telah dimuat, Anda dapat meletakkan ini di akhir dokumen: <img src = "thisimagedoesnotexist.dmy" onerror = 'initDocument ()' style = 'display: none;'> Trik pintar , eh?

Kaj Risberg

2

tidak bekerja dengan google chrome.

deepcell

9

Inilah yang membantu saya. Untuk menambahkan blok kode html dari b.htmlke a.html, ini harus masuk ke headtag a.html:

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

Kemudian dalam tag tubuh, sebuah wadah dibuat dengan id unik dan blok javascript untuk memuatnya b.htmlke dalam wadah, sebagai berikut:

<div id="b-placeholder">

</div>

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

Ramtin
sumber

6

Bagaimana jawaban ini berbeda dari jawaban yang diterima dari pertanyaan ini?

Mohammad Usman

2

@MohammadUsman Di sini kode wadah dan javascript terletak di tag tubuh sementara jawaban yang diterima menempatkan mereka di tag kepala dan meninggalkan wadah di tag tubuh saja.

Ramtin

Ini tidak bernilai jawaban baru ... ini adalah komentar

Kennet Celeste

8

Saya tahu ini adalah posting yang sangat lama, jadi beberapa metode tidak tersedia saat itu. Tapi ini pendapat saya yang sangat sederhana (berdasarkan jawaban Lolo).

Itu bergantung pada atribut data- * HTML5 dan oleh karena itu sangat generik karena menggunakan fungsi jQuery untuk setiap fungsi untuk mendapatkan setiap .class yang cocok dengan "load-html" dan menggunakan atribut 'sumber data' masing-masing 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>

Ben Mc
sumber

7

Anda dapat menggunakan polyfill Impor HTML ( https://www.html5rocks.com/en/tutorials/webcomponents/imports/ ), atau solusi yang disederhanakan https://github.com/dsheiko/html-import

Misalnya, pada halaman Anda mengimpor blok HTML seperti itu:

<link rel="html-import" href="./some-path/block.html" >

Blok mungkin memiliki impor sendiri:

<link rel="html-import" href="./some-other-path/other-block.html" >

Importir menggantikan arahan dengan HTML yang dimuat cukup banyak seperti SSI

Arahan ini akan disajikan secara otomatis segera setelah Anda memuat JavaScript kecil ini:

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

Ini akan memproses impor ketika DOM siap secara otomatis. Selain itu, memperlihatkan API yang dapat Anda gunakan untuk berjalan secara manual, untuk mendapatkan log dan sebagainya. Nikmati :)

Dmitry Sheiko
sumber

Di mana seharusnya baris skrip masuk dalam File html?

Andrew Truckle

Di mana saja dalam BODY. Dapat ditempatkan secara rekursif dalam konten file yang disertakan

Dmitry Sheiko

Apakah Anda menguji ini?

Bhikkhu Subhuti

Tentunya saya lakukan. Saya sudah menggunakannya selama bertahun-tahun. Kenapa bertanya? Masalah apapun?

Dmitry Sheiko

Jadi "kunci" untuk ini adalah script async srctampaknya. Cobalah!

javadba

6

Sebagian besar solusi berfungsi tetapi mereka memiliki masalah dengan jquery :

Masalahnya adalah mengikuti kode yang $(document).ready(function () { alert($("#includedContent").text()); }tidak memberi peringatan apa pun selain memperingatkan konten yang disertakan.

Saya menulis kode di bawah ini, dalam solusi saya, Anda dapat mengakses konten yang disertakan dalam $(document).readyfungsi:

(Kuncinya adalah memuat konten yang disertakan secara sinkron).

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>

termasuk .inc :

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

jquery menyertakan plugin di github

Amir Saniyan
sumber

Saat menggunakan ini dan kemudian melihat sumber halaman dari browser Anda hanya melihat skrip. Tidakkah ini memengaruhi kemampuan mesin pencari untuk mengurai situs Anda, yang pada akhirnya menghancurkan segala upaya SEO?

hmcclungiii

Ya, metode ini menghancurkan semua SEO :)

Amir Saniyan

Kemudian lagi, setiap metode berbasis JavaScript melakukannya.

wizzwizz4

5

Untuk memasukkan konten dari file bernama:

<!--#include virtual="filename.htm"-->

St.Eve
sumber

1

menggunakan kurung sudut untuk []: [! - # include virtual = "include_omega.htm" -]

St.Eve

4

Jawaban Athari (yang pertama!) Terlalu konklusif! Baik sekali!

Tetapi jika Anda ingin memberikan nama halaman untuk 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

Jadi itu menjadi seperti ini:

URL Anda:

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 untuk saya! Semoga membantu :)

Massa
sumber

Masalah keamanan, bacause Anda dapat mengirim seseorang tautan ini: www.yoursite.com/a.html?p=htttp://www.linktovir.us/here.html

JoostS

4

html5rocks.com memiliki tutorial yang sangat baik tentang hal ini, dan ini mungkin agak terlambat, tapi saya sendiri tidak tahu ini ada. w3schools juga memiliki cara untuk melakukan ini menggunakan perpustakaan baru mereka yang disebut w3.js. Masalahnya, ini membutuhkan penggunaan server web dan objek HTTPRequest. Anda sebenarnya tidak dapat memuat ini secara lokal dan mengujinya di mesin Anda. Yang bisa Anda lakukan adalah menggunakan polyfill yang disediakan di tautan html5rocks di bagian atas, atau ikuti tutorialnya. Dengan sedikit sihir JS, 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 tautan (Dapat mengubah menjadi elemen tautan yang diinginkan jika sudah disetel), mengatur impor (kecuali Anda sudah memilikinya), dan kemudian menambahkannya. Kemudian dari sana akan mengambil dan mengurai file dalam HTML, dan kemudian menambahkannya ke elemen yang diinginkan di bawah div. Ini semua dapat diubah agar sesuai dengan kebutuhan Anda dari elemen tambahan ke tautan yang Anda gunakan. Saya harap ini membantu, mungkin tidak relevan sekarang jika cara yang lebih baru dan lebih cepat telah keluar tanpa menggunakan perpustakaan dan kerangka kerja seperti jQuery atau W3.js.

UPDATE: Ini akan menimbulkan kesalahan yang mengatakan bahwa impor lokal telah diblokir oleh kebijakan CORS. Mungkin perlu akses ke web yang dalam untuk dapat menggunakan ini karena properti web yang dalam. (Artinya tidak ada penggunaan praktis)

SubLock69
sumber

4

Inilah pendekatan saya menggunakan Fetch API dan fungsi async

<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>

barro32
sumber

3

Tidak ada solusi HTML langsung untuk tugas untuk saat ini. Bahkan Impor HTML (yang secara permanen dalam konsep ) tidak akan melakukan hal itu, karena Impor! = Termasuk dan beberapa sihir JS akan tetap diperlukan.
Saya baru-baru menulis sebuah VanillaJS naskah itu hanya untuk dimasukkan HTML ke dalam HTML, tanpa komplikasi.

Tempatkan saja di a.html

<link data-wi-src="b.html" />
<!-- ... and somewhere below is ref to the script ... -->
<script src="wm-html-include.js"> </script>

Itu open-sourcedan mungkin memberikan ide (saya harap)

al.scvorets
sumber

3

Anda dapat melakukannya dengan jQuery library JavaScript 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 perhatikan bahwa banner.htmlharus ditempatkan di bawah domain yang sama dengan halaman Anda yang lain jika tidak, halaman web Anda akan menolak banner.htmlfile tersebutkebijakan Berbagi Sumber Daya Lintas-Asal .

Perlu diketahui juga bahwa jika Anda memuat konten Anda dengan JavaScript, Google tidak akan dapat mengindeksnya sehingga itu bukan metode yang baik untuk alasan SEO.

AndrewL64
sumber

2

Apakah Anda mencoba injeksi iFrame?

Ini menyuntikkan iFrame dalam dokumen dan menghapus dirinya sendiri (seharusnya dalam HTML DOM)

<iframe src="header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>

Salam

Alban Lusitanae
sumber

1

Saya datang ke topik ini mencari sesuatu yang serupa, tetapi sedikit berbeda dari masalah yang ditimbulkan oleh lolo. Saya ingin membuat halaman HTML yang berisi menu alfabet tautan ke halaman lain, dan masing-masing halaman lainnya mungkin ada atau tidak ada, dan urutan pembuatannya mungkin tidak sesuai abjad (atau bahkan numerik). Juga, seperti Tafkadasoh, saya tidak ingin membengkak halaman web dengan jQuery. Setelah meneliti masalah dan bereksperimen selama beberapa jam, inilah yang berhasil bagi saya, dengan menambahkan komentar yang relevan:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/application/html; charset=iso-8859-1">
  <meta name="Author" content="me">
  <meta copyright="Copyright" content= "(C) 2013-present by me" />
  <title>Menu</title>

<script type="text/javascript">
<!--
var F000, F001, F002, F003, F004, F005, F006, F007, F008, F009,
    F010, F011, F012, F013, F014, F015, F016, F017, F018, F019;
var dat = new Array();
var form, script, write, str, tmp, dtno, indx, unde;

/*
The "F000" and similar variables need to exist/be-declared.
Each one will be associated with a different menu item,
so decide on how many items maximum you are likely to need,
when constructing that listing of them.  Here, there are 20.
*/


function initialize()
{ window.name="Menu";
  form = document.getElementById('MENU');
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = str.substr(tmp);
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = str + ".js";
    form.appendChild(script);
  }

/*
The for() loop constructs some <script> objects
and associates each one with a different simple file name,
starting with "000.js" and, here, going up to "019.js".
It won't matter which of those files exist or not.
However, for each menu item you want to display on this
page, you will need to ensure that its .js file does exist.

The short function below (inside HTML comment-block) is,
generically, what the content of each one of the .js files looks like:
<!--
function F000()
{ return ["Menu Item Name", "./URLofFile.htm", "Description string"];
}
-->

(Continuing the remarks in the main menu.htm file)
It happens that each call of the form.appendChild() function
will cause the specified .js script-file to be loaded at that time.
However, it takes a bit of time for the JavaScript in the file
to be fully integrated into the web page, so one thing that I tried,
but it didn't work, was to write an "onload" event handler.
The handler was apparently being called before the just-loaded
JavaScript had actually become accessible.

Note that the name of the function in the .js file is the same as one
of the the pre-defined variables like "F000".  When I tried to access
that function without declaring the variable, attempting to use an
"onload" event handler, the JavaScript debugger claimed that the item
was "not available".  This is not something that can be tested-for!
However, "undefined" IS something that CAN be tested-for.  Simply
declaring them to exist automatically makes all of them "undefined".
When the system finishes integrating a just-loaded .js script file,
the appropriate variable, like "F000", will become something other
than "undefined".  Thus it doesn't matter which .js files exist or
not, because we can simply test all the "F000"-type variables, and
ignore the ones that are "undefined".  More on that later.

The line below specifies a delay of 2 seconds, before any attempt
is made to access the scripts that were loaded.  That DOES give the
system enough time to fully integrate them into the web page.
(If you have a really long list of menu items, or expect the page
to be loaded by an old/slow computer, a longer delay may be needed.)
*/

  window.setTimeout("BuildMenu();", 2000);
  return;
}


//So here is the function that gets called after the 2-second delay  
function BuildMenu()
{ dtno = 0;    //index-counter for the "dat" array
  for(indx=0; indx<20; indx++)
  { str = "00" + indx;
    tmp = str.length - 3;
    str = "F" + str.substr(tmp);
    tmp = eval(str);
    if(tmp != unde) // "unde" is deliberately undefined, for this test
      dat[dtno++] = eval(str + "()");
  }

/*
The loop above simply tests each one of the "F000"-type variables, to
see if it is "undefined" or not.  Any actually-defined variable holds
a short function (from the ".js" script-file as previously indicated).
We call the function to get some data for one menu item, and put that
data into an array named "dat".

Below, the array is sorted alphabetically (the default), and the
"dtno" variable lets us know exactly how many menu items we will
be working with.  The loop that follows creates some "<span>" tags,
and the the "innerHTML" property of each one is set to become an
"anchor" or "<a>" tag, for a link to some other web page.  A description
and a "<br />" tag gets included for each link.  Finally, each new
<span> object is appended to the menu-page's "form" object, and thereby
ends up being inserted into the middle of the overall text on the page.
(For finer control of where you want to put text in a page, consider
placing something like this in the web page at an appropriate place,
as preparation:
<div id="InsertHere"></div>
You could then use document.getElementById("InsertHere") to get it into
a variable, for appending of <span> elements, the way a variable named
"form" was used in this example menu page.

Note: You don't have to specify the link in the same way I did
(the type of link specified here only works if JavaScript is enabled).
You are free to use the more-standard "<a>" tag with the "href"
property defined, if you wish.  But whichever way you go,
you need to make sure that any pages being linked actually exist!
*/

  dat.sort();
  for(indx=0; indx<dtno; indx++)
  { write = document.createElement('span');
    write.innerHTML = "<a onclick=\"window.open('" + dat[indx][1] +
                      "', 'Menu');\" style=\"color:#0000ff;" + 
                      "text-decoration:underline;cursor:pointer;\">" +
                      dat[indx][0] + "</a> " + dat[indx][2] + "<br />";
    form.appendChild(write);
  }
  return;
}

// -->
</script>
</head>

<body onload="initialize();" style="background-color:#a0a0a0; color:#000000; 

font-family:sans-serif; font-size:11pt;">
<h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;MENU
<noscript><br /><span style="color:#ff0000;">
Links here only work if<br />
your browser's JavaScript<br />
support is enabled.</span><br /></noscript></h2>
These are the menu items you currently have available:<br />
<br />
<form id="MENU" action="" onsubmit="return false;">
<!-- Yes, the <form> object starts out completely empty -->
</form>
Click any link, and enjoy it as much as you like.<br />
Then use your browser's BACK button to return to this Menu,<br />
so you can click a different link for a different thing.<br />
<br />
<br />
<small>This file (web page) Copyright (c) 2013-present by me</small>
</body>
</html>

vernonner3voltazim
sumber

1

Ini adalah artikel yang bagus , Anda dapat mengimplementasikan perpustakaan umum dan cukup menggunakan kode di bawah ini untuk mengimpor file HTML apa pun dalam satu baris.

<head>
   <link rel="import" href="warnings.html">
</head>

Anda juga dapat mencoba Google Polymer

Dhiral Pandya
sumber

6

"cukup gunakan kode di bawah ini untuk mengimpor file HTML dalam satu baris" cukup tidak jujur. Anda kemudian harus menulis beberapa JS untuk menggunakan konten apa pun yang Anda impor, sehingga akhirnya menjadi lebih dari "satu baris".

skybondsor

1

Menggunakan ES6 backticks ``: templat literals !

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>

Luaskan cuplikan

Dengan cara ini kita dapat memasukkan html tanpa menyandikan kutipan, memasukkan variabel dari DOM, dan sebagainya.

Ini adalah mesin templating yang kuat, kita dapat menggunakan file js terpisah dan menggunakan acara untuk memuat konten di tempat, atau bahkan memisahkan semuanya dalam potongan dan memanggil permintaan:

let inject = document.createElement('script');
inject.src= '//....com/template/panel45.js';
more.appendChild(inject);

https://caniuse.com/#feat=template-literals

NVRM
sumber

1

Contoh yang bagus - mengapa tidak ada upvotes (sampai sekarang)?

javadba

Hei, Anda benar, pada tahun 2018 di atas adalah tanda yang jelas dari RTFM yang baik;) Saya sebagian besar menghancurkan javascriptlencana itu sebagai programmer hobi sampai saat itu.

NVRM

1

Untuk membuat Solusi berfungsi, Anda harus menyertakan file csi.min.js, yang dapat Anda temukan di sini .

Seperti contoh yang ditunjukkan pada GitHub, untuk menggunakan perpustakaan ini Anda harus menyertakan file csi.js di header halaman Anda, maka Anda perlu menambahkan atribut data-include dengan nilainya yang diatur ke file yang ingin Anda sertakan, pada wadah elemen.

Sembunyikan Kode Salin

<html>
  <head>
    <script src="csi.js"></script>
  </head>
  <body>
    <div data-include="Test.html"></div>
  </body>
</html>

... semoga membantu.

Hamza Ali
sumber

0

PHP adalah bahasa scripting tingkat server. Itu dapat melakukan banyak hal, tetapi satu penggunaan populer adalah untuk memasukkan dokumen HTML di dalam halaman Anda, sama seperti SSI. Seperti SSI, ini adalah teknologi tingkat server. Jika Anda tidak yakin apakah Anda memiliki fungsi PHP di situs web Anda, hubungi penyedia hosting Anda.

Berikut ini adalah skrip PHP sederhana yang dapat Anda gunakan untuk memasukkan potongan HTML pada halaman web yang mendukung PHP:

Simpan HTML untuk elemen umum situs Anda untuk memisahkan file. Misalnya, bagian navigasi Anda mungkin disimpan sebagai navigation.html atau navigation.php. Gunakan kode PHP berikut untuk memasukkan HTML itu di setiap halaman.

<?php require($DOCUMENT_ROOT . "navigation.php"); ?>

Gunakan kode yang sama pada setiap halaman yang ingin Anda sertakan file. Pastikan untuk mengubah nama file yang disorot menjadi nama dan jalur ke file sertakan Anda.

Udara Pathirage
sumber

0

Jika Anda menggunakan beberapa kerangka kerja seperti Django / Bootle, mereka sering mengirimkan beberapa mesin template. Katakanlah Anda menggunakan botol, dan mesin templat default adalah SimpleTemplate Engine . Dan di bawah ini adalah file html murni

$ cat footer.tpl
<hr> <footer>   <p>&copy; stackoverflow, inc 2015</p> </footer>

Anda dapat memasukkan footer.tpl di file utama Anda, seperti:

$ cat dashboard.tpl
%include footer

Selain itu, Anda juga dapat meneruskan parameter ke dashborard.tpl Anda.

jaseywang
sumber

0

Berdasarkan jawaban https://stackoverflow.com/a/31837264/4360308 Saya telah mengimplementasikan fungsi ini dengan Nodejs (+ express + cheerio) sebagai berikut:

HTML (index.html)

<div class="include" data-include="componentX" data-method="append"></div>
<div class="include" data-include="componentX" data-method="replace"></div>

JS

function includeComponents($) {
    $('.include').each(function () {
        var file = 'view/html/component/' + $(this).data('include') + '.html';
        var dataComp = fs.readFileSync(file);
        var htmlComp = dataComp.toString();
        if ($(this).data('method') == "replace") {
            $(this).replaceWith(htmlComp);
        } else if ($(this).data('method') == "append") {
            $(this).append(htmlComp);
        }
    })
}

function foo(){
    fs.readFile('./view/html/index.html', function (err, data) {
        if (err) throw err;
        var html = data.toString();
        var $ = cheerio.load(html);
        includeComponents($);
        ...
    }
}

tambahkan -> termasuk konten ke dalam div

ganti -> menggantikan div

Anda dapat dengan mudah menambahkan lebih banyak perilaku mengikuti desain yang sama

giroxiii
sumber

Sertakan file HTML lain dalam file HTML

Jawaban: