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
Mengalih keluar
<!-- another-html-file.html --> <h1>Another HTML file</h1>
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>
<!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!