Stackoverflow에 대한 질문: HTML 파일에 다른 HTML 파일 포함 저는 여기저기 놀다가 다음을 사용하여 깔끔한 방법을 생각해냈습니다. 1) fetch()로 파일 내용 읽기 2) 문자열에서 DOM 노드 렌더링 3) DOM 노드를 제자리에 태그하세요.</p> <p><스크립트> 제거 태그는 HTML 사양 para 4.12.1.1 처리 모델에 언급되어 있으므로 교체는 사양에 따른 것으로 보입니다.</p> <h2> 구조 </h2> <p><img src="https://img.php.cn/upload/article/000/000/000/173093868549292.jpg" alt="Inject HTML snippet from file"></p> <h2> 다른 HTML 파일 </h2> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!-- another-html-file.html --> <h1>Another HTML file</h1> </pre><div class="contentsignin">로그인 후 복사</div></div> <h2> HTML 파일 index.html </h2> <p>스크립트 태그는 another-html-file.html의 내용으로 대체됩니다<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre><!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 ) ) })()
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
