Rumah >hujung hadapan web >tutorial js >Suntikan coretan HTML daripada fail

Suntikan coretan HTML daripada fail

Susan Sarandonasal: 2024-11-07 08:18:03363semak imbas

Soalan tentang stackoverflow:

Sertakan fail HTML lain dalam fail HTML

Saya bermain-main dan menghasilkan cara yang bersih untuk melakukannya dengan:
1) Membaca kandungan fail dengan fetch()
2) Memaparkan Nod DOM daripada rentetan
3) Menggantikan teg dengan Nod DOM di tempatnya.

Mengalih keluar tag disebut dalam spesifikasi HTML para 4.12.1.1 Model pemprosesan jadi penggantian nampaknya mengikut spesifikasi.

Struktur

Inject HTML snippet from file

Satu lagi fail HTML

<!-- another-html-file.html -->
<h1>Another HTML file</h1>

Fail HTML index.html

Teg skrip akan digantikan pada tempatnya dengan kandungan another-html-file.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        (() => {
            const thisScript = document.currentScript
            fetch('./another-html-file.html')
            .then(
                (res) => (
                    res.ok // checking if response is ok
                    ? res.text() // return promise with file content as string
                    : null // return null if file is not found
                )
            )
            .then(
                (htmlStr) => (
                    htmlStr // checking if something is returned
                    ? thisScript.replaceWith(
                        // replace this script tag with the DOM Node created from string
                        document.createRange().createContextualFragment(htmlStr)
                    ) 
                    : thisScript.remove() // fallback to remove script if null is returned
                )
            )
        })()
    </script>
</body>
</html>

Hasilnya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Another HTML file</h1>
</body>
</html>

Atas ialah kandungan terperinci Suntikan coretan HTML daripada fail. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html String include dom

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk Mengisih Tatasusunan dalam Dokumen Terbenam dalam MongoDB?Artikel seterusnya：Bagaimana untuk Mengisih Tatasusunan dalam Dokumen Terbenam dalam MongoDB?

Artikel berkaitan

Lihat lagi