Как получить весь документ HTML как строку?

Есть ли способ в JS получить весь HTML в тегах html в виде строки?

document.documentElement.??

ОТВЕТЫ

Ответ 1

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);

Ответ 3

Я верю, что 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+. Колин ответит на страницу W3C quirksmode, которая предлагает хорошее сравнение совместимости между браузерами (для других функций DOM тоже).

Ответ 4

Я попробовал различные ответы, чтобы увидеть, что возвращается. Я использую последнюю версию Chrome.

Предложение document.documentElement.innerHTML; вернуло <head> ... </body>

Предложение Gaby document.getElementsByTagName('html')[0].innerHTML; вернуло то же самое.

Предложение document.documentElement.outerHTML; вернуло <html><head> ... </body></html> что есть все, кроме "doctype".

Вы можете получить объект doctype с помощью document.doctype;. Это возвращает объект, а не строку, поэтому, если вам нужно извлечь данные как строки для всех дотипов вплоть до HTML5, включая: HTML-код: Получить DocType HTML как строку с Javascript

Мне нужен только HTML5, поэтому для создания всего документа мне было достаточно следующего:

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

Ответ 5

Вы также можете сделать:

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

Вы не получите тег Doctype или html, но все остальное...

Ответ 6

document.documentElement.outerHTML

Ответ 7

ТОЛЬКО ВЕРОЯТНО:

>     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. (Показывает ОЧЕНЬ ПЕРВЫЕ 300 символов из ОЧЕНЬ начала исходного текста, в основном doctype-defs.)

НО имейте в виду, что нормальный "Сохранить как" -Dialog FF MIGHT НЕ сохраняет текущее состояние страницы, а не только исходно загруженный текст X/h/tml-source! (POST-up ss для некоторого временного файла и перенаправление на него может доставить сохраненный исходный текст с внесенными в него изменениями/изменениями.)

Несмотря на то, что FF удивляет хорошим восстановлением на "обратном" и NICE-включением состояний/значений в "Сохранить (как)..." для полей ввода, textarea и т.д., а не на элементы в contenteditable/designMode...

Если нет xhtml- resp. xml-file (mime-type, not only filename-extension!), можно использовать document.open/write/close для установки appr. контента на исходный слой, который будет сохранен в диалоговом окне сохранения пользователя из меню File/Save FF. видеть: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite и

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

Нейтрально к вопросам X (ht) ML, попробуйте "view-source: http://..." как значение src-атрибута iframe (script -made!?) iframe, для доступа к iframes-документу в FF:

<iframe-elementnode>.contentDocument, см. google "mdn contentDocument" для appr. например, "textContent". "Получил это много лет назад и не хотел ползать за него. Если еще нужно срочно, упомяните об этом, я должен погрузиться в...

Ответ 8

document.documentElement.innerHTML

Ответ 9

Я всегда использую

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

Возможно, это не правильный путь, но я могу понять это, когда вижу это.

Ответ 11

Кроме того, чтобы получить информацию за пределами <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}')
    }
}

Я опубликовал этот код как document-outerhtml на npm.

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
}

Ответ 12

Мне просто нужен 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>

Ответ 13

Вы должны пройтись по документу childNodes и получить контент externalHTML.

в VBA это выглядит так

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

используя это, позволяет получить все элементы веб-страницы, включая узел <! DOCTYPE>, если он существует

Ответ 14

На самом деле правильный путь:

webBrowser1.DocumentText