비행 중에 HTML 문서를 만드는 세 가지 방법

즉시 HTML 문서 작성, JavaScript가 있거나 없거나 때로는 필요합니다. 확인 페이지 또는 전체 페이지가 포함 된 iframe을 표시할지 여부가 무엇이든간에 문서가 충분히 간단하면 쉽게 작성할 수 있습니다 데이터 URL 또는 자바 스크립트를 함께 사용하여 게재.

그러나 어떻게 그것에 대해 가야합니까? JavaScript를 사용하여 문서에 HTML을 추가하는 방법을 이미 알고 있지만 전체 HTML 문서 만들기? 아래에서 설명 할 일부 메소드에 관심이있을 수 있습니다. 첫 번째 메소드는 JavaScript가 필요하지 않습니다.!

새로 만든 모든 문서를 보여 드리겠습니다. iframe에서 그래서 당신은 그들이 렌더링 된 것을 볼 수 있습니다. 그러나 적합하다고 생각되는 문서는 사용할 수 있습니다. 예를 들어, 데이터베이스에 저장 또는 웹 서비스를 통해 전송 어딘가에 렌더링 될.

1. 데이터 URL

데이터 URL 간단하고 효과적인 방법을 제공합니다. 웹 페이지에서 문서 제공. 당신이 그것에 익숙하지 않은 경우에 그들이 일하는 방법에 우리의 이전 기사를 읽으십시오.

기본적으로 데이터 URL 시작하다 데이터: URL 스킴. 그 다음에 제공되는 콘텐츠, 그 전에 선택적으로 미디어 종류 그리고 내용의 인코딩.

이 방법으로 제공되는 이미지를 보았을 것입니다. 기본 64 자 미디어 URL에 따라 미디어 유형에 따라 데이터 URL의 콘텐츠로 제공됩니다..

위 코드는 노트북 그림이있는 사람의 PNG 이미지를 표시합니다. 브라우저에서 이모티콘을 확인할 수 있습니다..

이것이 어떻게 행해지는 것과 비슷합니다., 데이터 URL은 HTML 문서를 제공 할 수도 있습니다.:

iframe HTML 문서를 렌더링한다. 다음을 포함하는 데이터 URL을 사용하여 추가되었습니다. 텍스트 / HTML 미디어 유형 & 그 뒤에 HTML 코드.

이 기술이 어떻게 작동하는지 보려면 HTML을 추가하여 아래의 Codepen 데모를 편집하십시오..

2. DOMImplementation 인터페이스

DOMImplementation 할 수있는 인터페이스입니다. 새로운 문서 만들기 그 중 하나를 사용하여 createDocument () (XML의 경우) 또는 createHTMLDocument () 방법 - 당신이 필요합니다. 인터페이스는 document.implementation 목적.

그만큼 createHTMLDocument () 방법 하나의 선택적 매개 변수를 취합니다. 어느 것이 새 문서의 제목.

너는 할 수있다. 새로 생성 된 문서에 HTML 추가 일반적으로하는 것과 같은 방법 : append (), appendChild (), 및 기타 DOM 관련 JavaScript 메소드.

 window.onload = () => var doc = document.implementation.createHTMLDocument (); doc.body.append ( 'Hello World!'); var iframeDoc = document.querySelector ( 'iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

위 코드에서 a 새 HTML 문서가 만들어 짐 ~을 사용하여 createHTMLDocument () 방법 DOMImplementation 인터페이스와 안녕하세요 세계! 문자열은 본문 요소에 추가됨.

그런 다음 새로 생성 된 문서가 렌더링 될 때 어떻게 보이는지 확인하기 위해 iframe의 document 요소를 대체했습니다 (iframeDoc.documentElement)와 새 문서의 문서 요소 (doc.documentElement)를 사용하여 replaceChild () 방법. 이렇게하면 너를 볼 수있다. 안녕하세요 세계! 끈 만들고 iframe에 추가 한 문서에서.

3. DOMParser API

그 이름에서 알 수 있듯이 DOMParser API HTML / XML 문자열을 DOM 문서로 구문 분석합니다..

새로운 DOMParser 객체 인스턴스 생성자를 사용하여 만들 수 있습니다., DOMParser (). 인스턴스에는 다음과 같은 메서드가 있습니다. parseFromString () 그 두 개의 인수를 취한 후 구문 분석을 수행합니다.: 구문 분석 할 문자열 및 작성할 문서의 문서 유형.

 window.onload = () => var parser = new DOMParser (); var doc = parser.parseFromString ( '안녕하세요 세계! ','text / html '); doc.body.append ( '추가 텍스트'); var iframeDoc = document.querySelector ( 'iframe'). contentDocument; iframeDoc.replaceChild (doc.documentElement, iframeDoc.documentElement);  

위의 코드에서 새로운 DOMParser 예 HTML 문자열을 DOM 문서로 파싱한다. ~을 사용하여 parseFromString () 방법.

그런 다음 앞의 코드 조각과 같은 방식으로 새로 생성 된 문서의 document 요소 iframe의 document 요소를 대체합니다.. 결과적으로, 우리가 만든 문서의 HTML 코드가 iframe에 표시됩니다..