Answers:
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解析和序列化规范中。
有关适合您的浏览器的兼容性,请参见quirksmode。全部支持innerHTML
。
var markup = document.documentElement.innerHTML;
alert(markup);
你可以做
new XMLSerializer().serializeToString(document)
在比IE 9更高的浏览器中
html
为服务器从未实际发送过的标签添加了属性:(
我相信 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解析和序列化中规范中。
该outerHTML
属性上的MSDN页面指出IE 5+支持它。Colin的答案链接到W3C quirksmode页面,该页面很好地比较了跨浏览器的兼容性(也适用于其他DOM功能)。
我尝试了各种答案以查看返回了什么。我正在使用最新版本的Chrome。
建议document.documentElement.innerHTML;
返回<head> ... </body>
加比的建议 document.getElementsByTagName('html')[0].innerHTML;
也是如此。
建议document.documentElement.outerHTML;
返回<html><head> ... </body></html>
除了'doctype'以外,都是其他。
您可以使用检索doctype对象,document.doctype;
这将返回一个对象,而不是字符串,因此,如果您需要提取所有文档类型的详细信息作为字符串,直到并包括HTML5,请在此处进行描述:使用Javascript将HTML的DocType获取为字符串
我只需要HTML5,因此以下内容足以创建整个文档:
alert('<!DOCTYPE HTML>' + '\n' + 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!(将ss张贴到某些临时文件并重定向到该临时文件,可能会提供可保存的源文本,以及对其进行的更改/编辑。)
尽管FF对“返回”具有良好的恢复性感到惊讶,而对输入类的FIELDS,textarea等,在“保存(另存为...)”中包含状态/值的NICE却令人惊讶,但对contenteditable / designMode中的元素却没有...
如果不是xhtml- resp。xml文件(MIME类型,而不仅仅是文件扩展名!),可以使用document.open/write/close来设置appr。内容保存到源层,这些内容将从FF的“文件/保存”菜单保存在用户的“保存”对话框中。参见:http : //www.w3.org/MarkUp/2004/xhtml-faq#docwrite响应。
https://developer.mozilla.org/zh-CN/docs/Web/API/document.write
与X(ht)ML的问题无关,请尝试使用“ view-source:http:// ...”作为iscript(脚本制作!?)iframe的src-attrib的值,以访问iframe- FF中的文档:
<iframe-elementnode>.contentDocument
,请参阅Google“ mdn contentDocument”以获取相关信息。成员,例如“ textContent”。``那是几年前的事,并且不喜欢它爬行。如果仍然有紧急需要,请提一下,我要潜入...
使用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}`)
}
}
我在npm上将此文档发布为document-outerhtml。
编辑注意上面的代码取决于一个函数doctypeToString
; 它的实现可以如下(下面的代码以doctype-to-string的形式发布在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
}
我总是用
document.getElementsByTagName('html')[0].innerHTML
可能不是正确的方法,但是当我看到它时便可以理解。
<html...>
标签。
我只需要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>
我正在使用outerHTML
元素(主<html>
容器)以及XMLSerializer
其他任何东西,包括<!DOCTYPE>
,<html>
容器外部的随机注释或其他可能存在的东西。似乎没有在<html>
元素外部保留空格,因此默认情况下,我使用添加换行符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));