Tüm doküman HTML'sini dize olarak nasıl alabilirim?

Yanıtlar:

320

MS, outerHTML ve innerHTMLözelliklerini bir süre önce .

MDN'ye göre , outerHTMLFirefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile ve Safari Mobile'da desteklenmektedir. outerHTMLolan DOM Ayrıştırma ve Seri tarifnamede.

Sizin için nelerin işe yarayacağına ilişkin tarayıcı uyumluluğu için quirksmode'a bakın . Tüm destek innerHTML.

var markup = document.documentElement.innerHTML;
alert(markup);
— Colin Burnett
kaynak
28
outerHTML dokümanı alamıyor.
— CMCDragonkai
2
bir cazibe gibi çalıştı! teşekkür ederim! js ve css dosyaları da dahil olmak üzere belgeye bağlı herhangi bir / tüm dosyaların boyutunu almanın herhangi bir yolu var mı?
— www139
@CMCDragonkai: Dokümanı ayrı olarak alabilir ve biçimlendirme dizesine ekleyebilirsiniz. İdeal değil, biliyorum ama mümkün.
— Mike Branski
76

Yapabilirsin

new XMLSerializer().serializeToString(document)

IE 9'dan daha yeni tarayıcılarda

Bkz. Https://caniuse.com/#feat=xml-serializer

— Erik Aigner
kaynak
5
Bu tarih / zaman damgalarına göre ilk doğru cevaptı . Böyle XML bildirimi gibi sayfanın Parçaları olacak değil dahil edilmesi ve diğer "cevabı" kullanılırken tarayıcılar kodunu manipüle edecek. Bu, yukarı oy verilmesi gereken tek gönderi (dos üç gün sonra yayınlandı). İnsanların dikkat etmesi gerekiyor!
— John
2
SerializeToString bir HTML kodlaması gerçekleştirdiğinden bu tamamen doğru değildir. Örneğin, kodunuz "Times New Roman", Times, serif gibi yazı tiplerini tanımlayan stiller içeriyorsa, tırnak işaretleri html ile kodlanır. Belki bu bazılarınız için önemli değil ama benim için ...
— Marko
3
@John iyi OP aslında " html etiketleri içindeki tüm HTML" istiyor . Ve Colin Burnett'in seçtiği en iyi cevap bunu başarıyor. Bu özel cevap (Erik'in) html etiketlerini ve dokümanı içerecektir. Yani, bu tamamen benim için kaba bir elmas ve tam olarak ne aradığını söyledi!
— Yorumunuz
2
İnsanların bu konuda dikkatli olması gerektiğini düşünüyorum, özellikle tarayıcınızın aldığı gerçek html olmayan bir değer döndürdüğü için. Benim durumumda, htmlsunucunun gerçekte hiç göndermediği etikete özellikler ekledi :(
— onassar
1
Her tarayıcıda desteklenir. Bu zayıf tarayıcı desteği nasıl?
— Erik Aigner
44

Bunu document.documentElement.outerHTMLsenin için geri getireceğine inanıyorum .

MDN'ye göre , outerHTMLFirefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile ve Safari Mobile'da desteklenmektedir. DOM Ayrıştırma ve SerileştirmeouterHTML aşamasında tarifnamede.

MSDN sayfa outerHTMLözelliği o 5+ IE desteklendiğini notları. Colin'in yanıtları, tarayıcılar arası uyumluluğun iyi bir karşılaştırmasını sunan W3C quirksmode sayfasına bağlanır (diğer DOM özellikleri için de).

— Noldorin
kaynak
Tüm tarayıcılar bunu desteklemez.
— Colin Burnett
@Colin: Evet, iyi bir nokta. Deneyimden, bağladığınız quirksmode sayfası aksini gösteriyor olsa da, hem IE 6+ hem de Firefox'un desteklediğini hatırlıyorum ...
— Noldorin
Firefox OuterHTML'yi desteklemez. IE tescilli. developer.mozilla.org/En/…
— Jesse Dearing
4
Doctype ve html etiketleri dahil her şeyi almanın bir yolu var mı?
— trusktr
1
Aslında benimki ilkti. : P
— Noldorin
40

Neyin geri döndüğünü görmek için çeşitli cevapları denedim. Chrome'un en son sürümünü kullanıyorum.

Öneri document.documentElement.innerHTML;geri döndü<head> ... </body>

Gaby'nin önerisi document.getElementsByTagName('html')[0].innerHTML;de aynı şekilde döndü.

Öneri 'doktrin'den ayrı olan her şey document.documentElement.outerHTML;geri döndü <html><head> ... </body></html>.

İle doctype nesnesini alabilirsiniz document.doctype; Bu bir dize değil bir nesne döndürür, bu yüzden HTML5'e kadar ve HTML5 de dahil olmak üzere tüm doctypes için dize olarak ayrıntıları ayıklamanız gerekirse burada açıklanır: Bir HTML'nin DocType'ını Javascript ile dize olarak alın

Yalnızca HTML5 istedim, bu yüzden aşağıdaki belgenin tamamını oluşturmak için yeterliydi:

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

— paulo62
kaynak
6
Bu en eksiksiz cevaptır ve kabul edilmelidir. 2016 itibarıyla tarayıcı uyumluluğu tamamlanmıştır ve ayrıntılı olarak (şu anda kabul edilen cevapta olduğu gibi) belirtilmesi artık gerekli değildir.
— Dan Dascalescu
10

Ayrıca şunları da yapabilirsiniz:

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

Doctype veya html etiketini almazsınız, ancak her şey ...

— Hakan
kaynak
4

SADECE IE:

>     webBrowser1.DocumentText

1.0 FF için:

//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'de çalışabilir. (Kaynak metnin ÇOK başından itibaren ÇOK İLK 300 karakterini gösterir, çoğunlukla doküman türü def.)

AMA normal "Farklı Kaydet" -FF Dialog, sayfanın geçerli durumunu kaydetmez OLABİLİR unutmayın, daha ziyade başlangıçta yüklü X / h / tml-kaynak-metin !! (ss'nin geçici bir dosyaya POST-up'ı ve buna yeniden yönlendirme, daha önce yapılan değişiklikler / düzenlemeler ile kaydedilebilir bir kaynak metin sağlayabilir.)

FF, "geri" iyi iyileşme ve içeriğe uygun / designMode öğelerinde değil , girdi benzeri FIELDS, textarea vb.

Eğer bir xhtml- değilse. xml dosyası (mime tipi, sadece dosya adı uzantısı DEĞİL!), biri appr ayarlamak için document.open/write/close kullanabilirsiniz. kaynak katmana, kullanıcının FF Dosya / Kaydet menüsünden kaydet iletişim kutusuna kaydedilecek içerik. bkz . http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.

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

X (ht) ML soruları için nötr, bir (script-made !?) iframe'in src-niteliğinin değeri olarak bir "view-source: http: // ..." deneyin - iframe'lere erişmek için- FF'deki belge:

<iframe-elementnode>.contentDocument, appr için google "mdn contentDocument" e bakın. örneğin 'textContent' gibi üyeler. `` O yıllar önce var ve taramayı sevmiyorum. Hala acil ihtiyaç duyuyorsanız, bundan bahsetmem gerektiğini söyleyin ...

— dos
kaynak
1

Ayrıca <html>...</html>, en önemlisi <!DOCTYPE ...>bildirimin dışında bir şeyler elde etmek için , her biri bir dizeye dönüştürerek document.childNodes'u yürütebilirsiniz:

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}`)
    }
}

Bu kodu npm'de document-externalhtml olarak yayınladım.

düzenlemek Yukarıdaki kod bir işleve bağlıdır doctypeToString; uygulaması aşağıdaki gibi olabilir (aşağıdaki kod npm'de doctype-dize olarak yayınlanır ):

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
}

— Gerben
kaynak
0

Her zaman kullanırım

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

Muhtemelen doğru yol değil ama gördüğümde anlayabiliyorum.

— gaby de wilde
kaynak
<html...>Etiketi döndürmeyeceği için bu yanlıştır .
— Dan Dascalescu
0

Sadece doctype html'ye ihtiyacım var ve IE11, Edge ve Chrome'da iyi çalışmalı. Kodun altında kullandım iyi çalışıyor.

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

ve bağlantı etiketinizde böyle kullanın.

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

Misal

    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>
Snippet'i genişlet

— kiranvj
kaynak
0

Ben kullanıyorum outerHTML(ana elementler için <html>konteyner) ve XMLSerializerherhangi bir şey için başka dahil <!DOCTYPE>dışında, rastgele bir yorum <html>konteyner, ya da orada başka ne olabilir. Beyaz alan <html>öğenin dışında korunmuyor gibi görünüyor , bu yüzden varsayılan olarak yeni satırlar ekliyorum 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));
Snippet'i genişlet

— Sam Watkins
kaynak
-2

ChildNodes belgesini yineleyip dışHTML içeriğini almanız gerekir.

VBA'da şöyle görünüyor

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

bunu kullanarak, varsa <! DOCTYPE> düğümü dahil olmak üzere web sayfasının tüm öğelerini almanızı sağlar

— milevyo
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.