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

https://stackoverflow.com/questions/817218

03-07-2019
|

Вопрос

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

document.documentElement.??

Решение

MS добавила свойства outerHTML и innerHTML некоторое время назад.

Согласно MDN , <=> поддерживается в Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile и Safari Mobile. <=> находится в анализе и сериализации DOM .

См. quirksmode для совместимости браузера с тем, что будет работать для вас. Вся поддержка <=>.

var markup = document.documentElement.innerHTML;
alert(markup);

Другие советы

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

new XMLSerializer().serializeToString(document)

в браузерах новее, чем IE 9

См. https://caniuse.com/#feat=xml-serializer

Я считаю, что 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. <=> находится в анализе и сериализации DOM .

Страница MSDN в <=> свойстве отмечает, что это поддерживается в IE 5+. Ответ Колина содержит ссылку на страницу причудливого режима W3C, которая предлагает хорошее сравнение кросс-браузерной совместимости (также для других функций DOM).

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

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

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

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

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

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

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

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

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

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

document.documentElement.outerHTML

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

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

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

Если НЕ XHTML - соотв. xml-файл (mime-type, НЕ просто расширение имени файла!), можно использовать document.open/write/close, чтобы УСТАНОВИТЬ appr. контент на исходный слой, который будет сохранен в диалоговом окне сохранения пользователя из меню «Файл / Сохранить» в FF. увидеть: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite соответственно

https://developer.mozilla.org/en- США / документы / Web / API / document.write

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

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

document.documentElement.innerHTML

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

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

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

Используйте document.documentElement.

На этот же вопрос ответили здесь: https://stackoverflow.com/a/7289396/2164160

Чтобы также получить вещи за пределами <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}`)
    }
}

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

редактировать Обратите внимание, что приведенный выше код зависит от функции doctypeToString;его реализация может быть следующей (код ниже опубликован на npm как преобразование типа документа в строку):

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
}

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

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

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

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

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

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

webBrowser1.DocumentText

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow