171
Có cách nào trong JS để nhận toàn bộ HTML trong các thẻ html, dưới dạng chuỗi không?Làm cách nào để lấy toàn bộ HTML của tài liệu dưới dạng chuỗi?
document.documentElement.??
A
Trả lời
233
MS thêm outerHTML và innerHTML tính một số thời gian trước đây.
Theo MDN, outerHTML được hỗ trợ trong Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile và Safari Mobile. outerHTML có trong thông số DOM Parsing and Serialization.
Xem quirksmode để có khả năng tương thích với trình duyệt cho những gì sẽ phù hợp với bạn. Tất cả hỗ trợ innerHTML.
var markup = document.documentElement.innerHTML;
alert(markup);
+14
outerHTML không nhận được loại tài liệu. – CMCDragonkai
+0
làm việc như một sự quyến rũ! cảm ơn bạn! là có cách nào để có được kích thước của bất kỳ/tất cả các tập tin liên quan đến tài liệu cũng như bao gồm các tệp js và css? – www139
+0
@CMCDragonkai: Bạn có thể [nhận riêng DOCTYPE] (http://stackoverflow.com/a/10162353/157385) và thêm nó vào chuỗi đánh dấu. Không phải lý tưởng, tôi biết, nhưng có thể. –
37
Tôi tin rằng document.documentElement.outerHTML sẽ trả lại điều đó cho bạn.
Theo MDN, outerHTML được hỗ trợ trong Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile và Safari Mobile. outerHTML có trong thông số DOM Parsing and Serialization.
Trang MSDN trên outerHTML property lưu ý rằng nó được hỗ trợ trong IE 5+. Câu trả lời của Colin liên kết đến trang quirksmode W3C, cung cấp một sự so sánh tốt về khả năng tương thích giữa các trình duyệt (đối với các tính năng DOM khác).
+0
Không tất cả các trình duyệt đều hỗ trợ điều này. –
+0
@Colin: Vâng, điểm tốt. Từ kinh nghiệm, tôi dường như nhớ rằng cả IE 6+ và Firefox đều hỗ trợ nó, mặc dù trang quirksmode mà bạn liên kết gợi ý khác ... – Noldorin
+0
Firefox không hỗ trợ OuterHTML. Nó là độc quyền của IE. https://developer.mozilla.org/En/Migrate_apps_from_Internet_Explorer_to_Mozilla#Generate_and_manipulate_content –
5
document.documentElement.outerHTML
+1
Không phải tất cả các trình duyệt đều hỗ trợ điều này. –
+2
Được hỗ trợ trong Firefox 11, Chrome 0.2, Internet Explorer 4.0, Opera 7, Safari 1.3, Android, Firefox Mobile 11, IE Mobile, Opera Mobile và Safari Mobile ([MDN] (https://developer.mozilla.org/vi -US/docs/DOM/element.outerHTML)). 'outerHTML' nằm trong đặc tả [Phân tích và tuần tự hóa DOM] (http://domparsing.spec.whatwg.org/#outerhtml). – XP1
+0
Câu trả lời của Colin chi tiết hơn. –
3
document.documentElement.innerHTML
+0
Điều này không trả lại thẻ ''. –
-4
Cách đúng là thực sự:
webBrowser1.DocumentText
+2
Chỉ khi bạn đang lưu trữ trang trong một điều khiển WinForms WebBrowser ... –
1
tôi luôn luôn sử dụng
document.getElementsByTagName('html')[0].innerHTML
Có lẽ không phải là cách đúng đắn nhưng tôi có thể hiểu được nó khi tôi nhìn thấy nó.
+0
Điều này không chính xác vì nó sẽ không trả lại thẻ '
9
Bạn cũng có thể làm:
document.getElementsByTagName('html')[0].innerHTML
Bạn sẽ không nhận được DOCTYPE hoặc thẻ html, nhưng mọi thứ khác ...
4
lẽ chỉ IE:
> webBrowser1.DocumentText
cho FF lên từ 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));
có thể hoạt động trong FF. (Hiển thị 300 ký tự RẤT NHIỀU đầu tiên từ đầu RẤT nguồn-văn bản, chủ yếu là doctype-defs.)
NHƯNG, hãy lưu ý rằng "Bình thường" Lưu dưới dạng -Dialog của FF MIGHT KHÔNG lưu trạng thái hiện tại của trang, thay vì tải X/h/tml-source-text thành văn bản gốc !! (một POST-up của ss để một số temp-file và chuyển hướng đến đó có thể cung cấp một văn bản nguồn saveable VỚI những thay đổi/chỉnh sửa trước khi thực hiện cho nó.)
Mặc dù FF bất ngờ bởi phục hồi tốt trên "trở lại" và bao gồm các trạng thái/giá trị của NICE trên "Lưu (dưới dạng) ..."cho FIELDS giống như kiểu nhập văn bản, văn bản v.v., không phải trên các phần tử trong contenteditable/designMode ...
Nếu NOT xhtml- resp. Xml-file (mime-type, NOT just filename-extension!), người ta có thể sử dụng document.open/write/close để cài đặt nội dung appr đó thành lớp nguồn, sẽ được lưu trên hộp thoại lưu của người dùng từ tên Tệp/Lưu của FF. xem: http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite resp.
https://developer.mozilla.org/en-US/docs/Web/API/document.write
Trung lập đối với câu hỏi của X (ht) ML, hãy thử "view-source: http: // ..." làm giá trị của src-attrib của một tập lệnh được tạo !?) iframe, - để truy cập một iframe-tài liệu trong FF:
<iframe-elementnode>.contentDocument, hãy xem google "mdn contentDocument" cho appr. các thành viên, chẳng hạn như 'textContent' chẳng hạn. 'Đã có những năm trước và không thích bò. Nếu vẫn còn nhu cầu khẩn cấp, hãy đề cập đến điều này, tôi phải đi sâu vào ...
26
Tôi đã thử các câu trả lời khác nhau để xem những gì được trả lại. Tôi đang sử dụng phiên bản Chrome mới nhất.
Các gợi ý document.documentElement.innerHTML; trở <head> ... </body>
Gaby của đề nghị document.getElementsByTagName('html')[0].innerHTML; trở giống nhau.
Đề xuất document.documentElement.outerHTML; trả lại <html><head> ... </body></html> là mọi thứ ngoài 'DOCTYPE'.
Bạn có thể lấy các đối tượng DOCTYPE với document.doctype; này trả về một đối tượng, không phải là một chuỗi, vì vậy nếu bạn cần phải trích xuất các chi tiết như dây đàn cho tất cả doctypes lên đến và bao gồm HTML5 nó được mô tả ở đây: Get DocType of an HTML as string with Javascript
tôi chỉ muốn HTML5, vì vậy sau đây là đủ cho tôi để tạo ra toàn bộ tài liệu:
alert('<!DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);
+0
Đây là câu trả lời hoàn chỉnh nhất và phải được chấp nhận. Tính đến năm 2016, khả năng tương thích của trình duyệt đã hoàn tất và đề cập đến chi tiết (như trong câu trả lời hiện được chấp nhận) không còn cần thiết nữa. –
0
Sử dụng document.documentElement.
cùng một câu hỏi đã trả lời ở đây: https://stackoverflow.com/a/7289396/2164160
+0
Câu hỏi đó phải được đóng lại khá nhiều bản sao của câu hỏi này, cũ hơn nhiều. Dù sao, phần thú vị là bạn cần '.outerHTML' và để có được' document.doctype', và câu trả lời hoàn chỉnh nhất là [Paolo's] (http://stackoverflow.com/a/26905999/1269037). –
25
Bạn có thể làm
new XMLSerializer().serializeToString(document)
trong các trình duyệt mới hơn IE 9.
+2
Đây là câu trả lời * đầu tiên * ** chính xác theo dấu ngày/giờ. Các phần của trang như khai báo XML sẽ * không * được bao gồm và các trình duyệt sẽ thao tác mã khi sử dụng "câu trả lời" khác. Đây là bài đăng * only * cần được bỏ phiếu (bài đăng của dos được đăng sau ba ngày). Mọi người cần chú ý! – John
+1
Điều này không hoàn toàn chính xác vì nó serializeToString thực hiện mã hóa HTML. Ví dụ: nếu mã của bạn chứa các kiểu định nghĩa phông chữ như "Times New Roman", Times, serif dấu ngoặc kép sẽ được mã hóa html. Có lẽ đó không phải là quan trọng đối với một số bạn nhưng với tôi nó là ... – Marko
+0
@ John cũng OP thực sự yêu cầu "toàn bộ HTML _within_ các thẻ html". Và câu trả lời hay nhất của Colin Burnett đã đạt được điều này. Câu trả lời cụ thể này (Erik's) sẽ bao gồm các thẻ html và doctype. Điều đó nói rằng, đây hoàn toàn là một viên kim cương thô ráp đối với tôi và chính xác những gì tôi đang tìm kiếm! Bình luận của bạn đã giúp quá bởi vì nó làm cho tôi dành nhiều thời gian hơn với câu trả lời này, vì vậy cảm ơn :) – evanrmurphy
duy nhất câu trả lời đúng: http://stackoverflow.com/questions/ 817218/how-to-get-the-toàn-tài liệu-html-as-a-string # answer-35917295 (** ngừng trả lời bên trong/bên ngoài câu trả lờiHTML, chúng KHÔNG cung cấp toàn bộ nguồn! **) – John