web-dev-qa-db-ja.com

文書全体のHTMLを文字列として取得する方法

JSの中でhtmlタグの中にHTML全体を文字列として入れる方法はありますか？

document.documentElement.??
javascripthtmldocumenttostring
200
Robinicks

MSはしばらく前にouterHTMLおよびinnerHTMLプロパティを追加しました。

MDN に従って、outerHTMLはFirefox 11、Chrome 0.2、Internet Explorer 4.0、Opera 7、Safari 1.3、Android、Firefox Mobile 11、IE Mobile、Opera Mobileでサポートされています、そしてSafari Mobile。 outerHTMLは DOM Parsing and Serialization の仕様にあります。

ブラウザの互換性については、 quirksmode を参照してください。すべてinnerHTMLをサポートしています。

var markup = document.documentElement.innerHTML;
alert(markup);
273
Colin Burnett

できるよ

new XMLSerializer().serializeToString(document)

IE 9より新しいブラウザでは

https://caniuse.com/#feat=xml-serializer を参照してください。

53
Erik Aigner

私はdocument.documentElement.outerHTMLがあなたにそれを返すべきだと思います。

MDN に従って、outerHTMLはFirefox 11、Chrome 0.2、Internet Explorer 4.0、Opera 7、Safari 1.3、Android、Firefox Mobile 11、IE Mobile、Opera Mobileでサポートされています、そしてSafari Mobile。 outerHTMLは DOM Parsing and Serialization の仕様にあります。

MSDNページの outerHTMLプロパティ によると、このページはIE 5+でサポートされています。 Colinの回答はW3Cのquirksmodeページにリンクしています。これはブラウザ間の互換性の比較を可能にします（他のDOM機能も同様）。

41
Noldorin

何が返されるかを見るためにさまざまな答えを試しました。最新バージョンのChromeを使用しています。

提案document.documentElement.innerHTML;が<head> ... </body>を返しました

Gabyの提案document.getElementsByTagName('html')[0].innerHTML;は同じ結果を返しました。

提案document.documentElement.outerHTML;は<html><head> ... </body></html>を返しました。これは 'doctype'以外のすべてのものです。

document.doctype;でDoctypeオブジェクトを取得できます。これは文字列ではなくオブジェクトを返すので、HTML5までのすべてのDoctypeの詳細を文字列として抽出する必要がある場合は、ここで説明します。 Javascriptを使用した文字列としてのHTMLのDocType

私はHTML5しか欲しくなかったので、私は文書全体を作成するのに次のもので十分です。

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

35
paulo62

次のこともできます。

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

あなたはDoctypeやHTMLタグを取得することはありませんが、他のすべてのもの...

9
Hakan
document.documentElement.outerHTML
5
Brian Campbell

おそらく唯一のIE：

>     webBrowser1.DocumentText

1.0からFFまで：

//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で動作する可能性があります。 （非常に最初のsource-textの先頭から300文字以内で、ほとんどdoctype-defsです。）

ただし、通常の "名前を付けて保存" - FFのダイアログはページの現在の状態を保存するのではなく、最初にロードされたX/h/tml-source-textを使用することをおすすめします。 （ある一時ファイルにssをPOSTしてそれにリダイレクトすると、以前に行われた変更/編集を加えた保存可能なソーステキストが提供される可能性があります。）

FFは "back"で回復が良く、 "Save（as）..."で状態/値が素敵に含まれていますが、入力に似たFIELDSではtextareaなど、要素ではありません満足のいくように/ designMode ...

そうでない場合はxhtml応答。 xml-file（mime-type、単なるファイル名拡張子ではありません！）、document.open/write/closeを使ってアプリケーションを設定することができます。ソースレイヤへのコンテンツ。FFのFile/Saveメニューからユーザの保存ダイアログに保存されます。参照してください： http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite それぞれ。

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>.contentDocument、apprについてはGoogleの "mdn contentDocument"を参照してください。例えば ​​'textContent'のようなメンバー。 「その年前に手に入れたそしてそれのために這うのが好きではない。それでも緊急の必要性があるならば、これに言及しなさい、私が中に飛び込むようになったという….

4
dos
document.documentElement.innerHTML
2
cherouvim

私はただ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>
0
kiranvj

文書のchildNodesを繰り返し、outerHTMLコンテンツを取得する必要があります。

vBAでは、このようになります

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

これを使用すると、<！DOCTYPE>ノードがある場合はそれを含むWebページのすべての要素を取得できます。

0
milevyo

document.documentElementを使用してください。

同じ質問がここに答えた： https://stackoverflow.com/a/7289396/216416

0
Veer En

<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 として公開しました。

edit上記のコードは関数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
Gerben

私はいつも使う

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

おそらく正しい方法ではありませんが、それを見れば理解できます。

0
gaby de wilde