Suntikan coretan HTML daripada fail-tutorial js-php.cn

Suntikan coretan HTML daripada fail

Susan Sarandon

Lepaskan： 2024-11-07 08:18:03

asal

277 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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