전체 문서 HTML을 문자열로 얻는 방법?

236

JS에서 html 태그 내의 전체 HTML을 문자열 로 가져 오는 방법이 있습니까?

document.documentElement.??
javascript  html  document  tostring 
— 플래시
소스
10
유일한 정답 : stackoverflow.com/questions/817218/...는 ( 최대 - 투표 중지 내부 / outerHTML에 답변을, 그들은 전체 소스를 제공하지 않습니다! )
— 존
2
document.body.parentElement.innerHTML
— Redwolf 프로그램
@John 그들이 제공하지 않는 것은 무엇입니까?
— bluejayke

답변:

319

MS는 얼마 전에 outerHTMLand innerHTML속성을 추가했습니다 .

에 따르면 MDN , outerHTML파이어 폭스 (11), 크롬 0.2, 인터넷 익스플로러 4.0, 오페라 7, 사파리 1.3, 안드로이드, 파이어 폭스 모바일 (11), IE 모바일, 오페라 모바일, 사파리 모바일에서 지원됩니다. outerHTML에 DOM 구문 분석 및 직렬화 사양입니다.

적합한 기능에 대한 브라우저 호환성 은 quirksmode 를 참조하십시오 . 모든 지원 innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);
— 콜린 버넷
소스
28
outerHTML은 doctype을 얻지 못합니다.
— CMCDragonkai
2
매력처럼 일했다! 감사합니다! js 및 css 파일을 포함하여 문서에 연결된 모든 / 모든 파일의 크기를 얻는 방법이 있습니까?
— www139
@CMCDragonkai : doctype을 별도로 가져 와서 마크 업 문자열 앞에 붙일 수 있습니다. 이상적이지는 않지만 가능합니다.
— Mike Branski
76

넌 할 수있어

new XMLSerializer().serializeToString(document)

IE 9보다 새로운 브라우저에서

참조 https://caniuse.com/#feat=xml-serializer를

— 에릭 아이그너
소스
5
이것은 날짜 / 시간 스탬프에 따른 첫 번째 정답 입니다. XML 선언과 같은 페이지의 일부는 포함 되지 않으며 브라우저는 다른 "답변"을 사용할 때 코드를 조작합니다. 이 게시물은 투표를해야하는 유일한 게시물입니다 (3 일 후 게시 된 게시물). 사람들은주의를 기울여야합니다!
— John
2
serializeToString이 HTML 인코딩을 수행하기 때문에 이것은 완전히 올바르지 않습니다. 예를 들어 코드에 "Times New Roman", Times와 같은 글꼴을 정의하는 스타일이 포함 된 경우 따옴표는 html로 인코딩됩니다. 아마도 그것은 여러분 중 일부에게는 중요하지 않지만 저에게는 ...
— Marko
3
@John 잘 OP는 실제로 " html 태그 내의 전체 HTML"을 요청합니다 . 그리고 Colin Burnett가 선택한 최상의 답변이이를 달성합니다. 이 특정 답변 (Erik 's)에는 html 태그와 doctype이 포함됩니다. 즉, 이것은 나를 위해 거칠고 완전히 내가 원하는 것을 완전히 다이아몬드였습니다! 이 : 나 감사, 그래서이 답변에 더 많은 시간을 할애했기 때문에 댓글이 너무 도움이
— evanrmurphy을
2
나는 사람들이 이것을 조심해야한다고 생각합니다. 특히 브라우저가받는 실제 HTML이 아닌 값을 반환하기 때문입니다. 필자의 경우 html서버가 실제로 전송하지 않은 태그 에 속성을 추가했습니다. (
— onassar
1
모든 브라우저에서 지원됩니다. 이 불량한 브라우저 지원은 어떻게됩니까?
— Erik Aigner
44

나는 document.documentElement.outerHTML당신을 위해 그것을 반환해야 한다고 생각 합니다.

에 따르면 MDN , outerHTML파이어 폭스 (11), 크롬 0.2, 인터넷 익스플로러 4.0, 오페라 7, 사파리 1.3, 안드로이드, 파이어 폭스 모바일 (11), IE 모바일, 오페라 모바일, 사파리 모바일에서 지원됩니다. outerHTML에 DOM 구문 분석 및 직렬화 사양입니다.

outerHTML속성 의 MSDN 페이지 는 IE 5 이상에서 지원된다고 설명합니다. Colin의 답변은 W3C quirksmode 페이지로 연결되며, 브라우저 간 호환성 (다른 DOM 기능의 경우도)을 잘 비교할 수 있습니다.

— 놀 도린
소스
모든 브라우저가이를 지원하지는 않습니다.
— 콜린 버넷
@ 콜린 : 네, 좋은 지적입니다. 경험상, IE 6 이상과 Firefox가 모두 지원한다는 것을 기억하는 것 같습니다. 링크 한 quirksmode 페이지가 다른 것을 제안하지만 ...
— Noldorin
Firefox는 OuterHTML을 지원하지 않습니다. IE 독점입니다. developer.mozilla.org/En/…
— 제시 Dearing
4
doctype과 html 태그를 포함한 모든 것을 얻는 방법이 있습니까?
— trusktr
1
실제로는 처음이었습니다. : P
— Noldorin
40

나는 반환 된 것을보기 위해 다양한 답변을 시도했습니다. 최신 버전의 Chrome을 사용하고 있습니다.

제안이 document.documentElement.innerHTML;돌아 왔습니다<head> ... </body>

개비의 제안 document.getElementsByTagName('html')[0].innerHTML;은 똑 같았다.

제안은 document.documentElement.outerHTML;반환 <html><head> ... </body></html> 'DOCTYPE'에서 떨어져 모든이다.

doctype 객체를 사용하여 검색 할 수 있습니다 document.doctype; : 당신은 모든 않은 doctype에 대한 문자열로 세부 사항을 추출하고, HTML5를 포함한이 여기에 설명이 필요 그렇다면,이 반환 객체가 아닌 문자열을 자바 스크립트로 문자열로 가져 오기에서 DocType하는 HTML의를

HTML5 만 원했기 때문에 다음과 같이 전체 문서를 작성하기에 충분했습니다.

alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);

— paulo62
소스
6
이것은 가장 완전한 답변이며 수락해야합니다. 2016 년 현재, 브라우저 호환성이 완료되었으며, 현재 허용되는 답변과 같이 자세히 언급 할 필요가 없습니다.
— Dan Dascalescu
10

당신은 또한 할 수 있습니다 :

document.getElementsByTagName('html')[0].innerHTML

Doctype 또는 html 태그는 얻지 않지만 그 밖의 모든 것은 ...

— 하칸
소스
4

아마도 IE 만 :

>     webBrowser1.DocumentText

FF가 1.0에서 증가한 경우 :

//serialize current DOM-Tree incl. changes/edits to ss-variable
var ns = new XMLSerializer();
var ss= ns.serializeToString(document);
alert(ss.substr(0,300));

FF에서 작동 할 수 있습니다. (매우 doctype-defs 인 소스 텍스트의 아주 처음부터 VERY FIRST 300자를 표시합니다.)

그러나 FF의 일반적인 "다른 이름으로 저장"-대화 상자는 페이지의 현재 상태를 저장하지 않고 원래로드 된 X / h / tml-source-text를 저장할 수는 없습니다 !! (일부 임시 파일로 ss를 POST하고 해당 파일로 리디렉션하면 이전에 변경 / 편집 한 내용으로 저장 가능한 소스 텍스트를 제공 할 수 있습니다.)

FF는 "back"에 대한 훌륭한 회복과 input-like FIELDS, textarea 등에 대한 "Save as as ..."에 상태 / 값의 NICE 포함으로 인해 contenteditable / designMode의 요소가 아니라 놀랍지 만 ...

xhtml이 아닌 경우. xml-file (파일 이름 확장명이 아닌 mime-type!), app.open/write/close를 사용하여 appr을 설정할 수 있습니다. FF의 파일 / 저장 메뉴에서 사용자의 저장 대화 상자에 저장 될 소스 계층에 콘텐츠를 저장합니다. 다음을 참조하십시오 : http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

https://developer.mozilla.org/en-US/docs/Web/API/document.write

X (ht) ML의 질문에 중립을두고, (script-made !?) iframe의 src-attrib 값으로 "view-source : http : // ..."를 사용해보십시오.-iframe에 액세스하려면- FF 문서 :

<iframe-elementnode>.contentDocumentappr에 대해서는 Google "mdn contentDocument"를 참조하십시오. 예를 들어 'textContent'와 같은 멤버 '몇 년 전만해도 크롤링을 좋아하지 않습니다. 여전히 긴급한 필요가 있다면 이것을 언급해야합니다 ...

— 도스
소스
1

사용하십시오 document.documentElement.

동일한 질문이 여기에 답변되었습니다 : https://stackoverflow.com/a/7289396/2164160

— 비엔
소스
그 질문은 이것보다 훨씬 더 오래된 것으로 복제되어야한다. 어쨌든, 흥미로운 부분은 당신이 필요 .outerHTML하고 얻는 document.doctype것입니다 . 가장 완벽한 대답은 Paolo 's 입니다.
— Dan Dascalescu
1

또한 외부에서 물건을 얻으려면 <html>...</html>, 가장 중요한을<!DOCTYPE ...> 선언 document.childNodes를 통해 문자열로 바꿀 수 있습니다.

const html = [...document.childNodes]
    .map(node => nodeToString(node))
    .join('\n') // could use '' instead, but whitespace should not matter.

function nodeToString(node) {
    switch (node.nodeType) {
        case node.ELEMENT_NODE:
            return node.outerHTML
        case node.TEXT_NODE:
            // Text nodes should probably never be encountered, but handling them anyway.
            return node.textContent
        case node.COMMENT_NODE:
            return `<!--${node.textContent}-->`
        case node.DOCUMENT_TYPE_NODE:
            return doctypeToString(node)
        default:
            throw new TypeError(`Unexpected node type: ${node.nodeType}`)
    }
}

이 코드를 다음과 같이 게시했습니다. 를 npm에서 document-outerhtml .

편집 위 코드는 함수에 따라 다릅니다 doctypeToString. 구현은 다음과 같습니다 (아래 코드는 npm에 doctype-to-string 으로 게시 됨 ).

function doctypeToString(doctype) {
    if (doctype === null) {
        return ''
    }
    // Checking with instanceof DocumentType might be neater, but how to get a
    // reference to DocumentType without assuming it to be available globally?
    // To play nice with custom DOM implementations, we resort to duck-typing.
    if (!doctype
        || doctype.nodeType !== doctype.DOCUMENT_TYPE_NODE
        || typeof doctype.name !== 'string'
        || typeof doctype.publicId !== 'string'
        || typeof doctype.systemId !== 'string'
    ) {
        throw new TypeError('Expected a DocumentType')
    }
    const doctypeString = `<!DOCTYPE ${doctype.name}`
        + (doctype.publicId ? ` PUBLIC "${doctype.publicId}"` : '')
        + (doctype.systemId
            ? (doctype.publicId ? `` : ` SYSTEM`) + ` "${doctype.systemId}"`
            : ``)
        + `>`
    return doctypeString
}

— 거벤
소스
0

나는 항상 사용

document.getElementsByTagName('html')[0].innerHTML

아마 올바른 방법은 아니지만 그것을 볼 때 이해할 수 있습니다.

— 기가 드 와일드
소스
<html...>태그를 반환하지 않기 때문에 올바르지 않습니다 .
— Dan Dascalescu
0

doctype html 만 있으면되며 IE11, Edge 및 Chrome에서 제대로 작동합니다. 아래 코드를 사용하면 정상적으로 작동합니다.

function downloadPage(element, event) {
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
        document.execCommand('SaveAs', '1', 'page.html');
        event.preventDefault();
    } else {
        if(isChrome) {
            element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
        }
        element.setAttribute('download', 'page.html');
    }
}

앵커 태그에서 이와 같이 사용하십시오.

<a href="#" onclick="downloadPage(this,event);" download>Download entire page.</a>

예

    function downloadPage(element, event) {
    	var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    
    	if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) {
    		document.execCommand('SaveAs', '1', 'page.html');
    		event.preventDefault();
    	} else {
    		if(isChrome) {
                element.setAttribute('href','data:text/html;charset=UTF-8,'+encodeURIComponent('<!doctype html>' + document.documentElement.outerHTML));
    		}
    		element.setAttribute('download', 'page.html');
    	}
    }
I just need doctype html and should work fine in IE11, Edge and Chrome. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<p>
<a href="#" onclick="downloadPage(this,event);"  download><h2>Download entire page.</h2></a></p>

<p>Some image here</p>

<p><img src="https://placeimg.com/250/150/animals"/></p>
스 니펫 확장

— kiranvj
소스
0

내가 사용하고 outerHTML(주 요소 <html>용기), 그리고 XMLSerializer아무것도 다른 사람을 포함하여 <!DOCTYPE>외부, 임의의 의견 <html>용기를, 또는 거기에 어떤 다른 수 있습니다. 공백은 <html>요소 외부에서 유지되지 않는 것 같습니다 . 따라서 기본적으로 개행을으로 추가하고 sep="\n"있습니다.

function get_document_html(sep="\n") {
    let html = "";
    let xml = new XMLSerializer();
    for (let n of document.childNodes) {
        if (n.nodeType == Node.ELEMENT_NODE)
            html += n.outerHTML + sep;
        else
            html += xml.serializeToString(n) + sep;
    }
    return html;
}

console.log(get_document_html().slice(0, 200));
스 니펫 확장

— 샘 왓킨스
소스
-2

문서 childNodes를 반복하고 outerHTML 컨텐츠를 가져와야합니다.

VBA에서는 다음과 같이 보입니다.

For Each e In document.ChildNodes
    Put ff, , e.outerHTML & vbCrLf
Next e

이것을 사용하면 <! DOCTYPE> 노드를 포함하여 웹 페이지의 모든 요소를 ​​가져올 수 있습니다

— 밀레 보
소스
-9

올바른 방법은 실제로 다음과 같습니다.

webBrowser1.DocumentText

— 다미아노
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.