在JS中是否有一种方法可以在HTML标签中获取整个HTML，作为字符串?
document.documentElement.??
我相信document.documentElement.outerHTML应该为您返回该值。
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等。outerHTML在DOM解析和序列化规范中。
outerHTML属性上的MSDN页面指出IE 5+支持它。Colin的回答链接到W3C quirksmode页面，该页面很好地比较了跨浏览器兼容性(也有其他DOM特性)。
document.documentElement.outerHTML
document.documentElement.innerHTML
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等。outerHTML在DOM解析和序列化规范中。
查看quirksmode浏览器兼容性，了解适合您的浏览器。都支持innerHTML。
var markup = document.documentElement.innerHTML;
alert(markup);
正确的做法其实是:
webBrowser1。DocumentText
我总是用
document.getElementsByTagName('html')[0].innerHTML
可能不是正确的方式，但当我看到它时，我能理解它。
你还可以:
document.getElementsByTagName('html')[0].innerHTML
你不会得到Doctype或html标签，但其他的一切…
可能只有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”上的良好恢复和“Save (as)…”上的状态/值的NICE包含，如输入字段，textarea等，而不是contentteditable / designMode中的元素…
如果不是xhtml- respp。xml-file (mime-type，不仅仅是filename-extension!)，你可以使用document。打开/写入/关闭设置appr。内容到源层，将保存在用户的保存对话框从文件/保存菜单的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://...”作为iframe (script-made!?)的src-attrib的值，-来访问FF中的iframe -文档:
< iframe-elementnode >。appr，请参见谷歌"mdn contentDocument"。成员，例如'textContent'。 “几年前就有了，不喜欢爬着拿。如果还有紧急需要，就提这个，我要潜入…
我尝试了各种答案，看看返回了什么。我用的是最新版本的Chrome浏览器。
建议:document.documentElement.innerHTML;返回<head>…身体< / >
Gaby的建议document.getElementsByTagName('html')[0].innerHTML;返回相同。
建议:document.documentElement.outerHTML;返回<html><head>…< /身体> < / html > 这是除了'doctype'以外的所有东西。
您可以使用document.doctype;这将返回一个对象，而不是一个字符串，所以如果你需要为所有文档类型提取字符串的细节，包括HTML5，它在这里描述
我只需要HTML5，所以以下内容足以让我创建整个文档:
alert (' < !DOCTYPE HTML>' + '\n' + document.documentElement.outerHTML);
使用document.documentElement。
这里回答了同样的问题: https://stackoverflow.com/a/7289396/2164160
你可以这样做
new XMLSerializer().serializeToString(document)
在比ie9更新的浏览器中
看到https://caniuse.com/壮举= xml序列化
还可以获取<html>…</html>，最重要的是<!DOCTYPE……>声明，你可以遍历文档。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上。
注意上面的代码依赖于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
}
我只需要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>
您必须遍历文档childNodes并获得outerHTML内容。
在VBA中是这样的
For Each e In document.ChildNodes
Put ff, , e.outerHTML & vbCrLf
Next e
使用这个，允许你获得网页的所有元素，包括< !DOCTYPE >节点(如果它存在的话)
我使用outerHTML的元素(主要<html>容器)，和XMLSerializer的任何其他包括<!DOCTYPE>， <html>容器外的随机注释，或者其他可能在那里的东西。空格似乎没有保留在<html>元素之外，所以我默认使用sep="\n"添加换行符。
函数get_document_html(sep="\n") { 让HTML = ""; let xml = new XMLSerializer(); for (let n of document.childNodes) { if (n.nodeType == Node.ELEMENT_NODE) html += n.outerHTML + sep; 其他的 html += xml.serializeToString(n) + sep; ｝ 返回html; ｝ console.log (get_document_html()。片(0,200));
如果你想获取DOCTYPE之外的所有内容，这将有效:
document.getElementsByTagName('html')[0].outerHTML;
如果你想要doctype也可以这样:
new XMLSerializer().serializeToString(document.doctype) + document.getElementsByTagName('html')[0].outerHTML;
推荐文章
- 将lodash导入到angular + typescript应用程序中
- 什么时候使用setAttribute vs .attribute=在JavaScript?
- 每60秒调用一个函数
- 如何隐藏元素而不让他们在页面上占用空间?
- 我如何链接到谷歌地图与特定的经度和纬度?
- 我如何上传一个文件与JS获取API?
- 在JavaScript中是否有一个“not in”操作符来检查对象属性?
- 防止跨度元件断行
- 我如何能得到滚动条的位置与JavaScript?
- JavaScript中的yield关键字是什么?
- 如何显示一个对象的所有方法?
- 如何防止滚动条重新定位网页?
- .js和.mjs文件有什么区别?
- Axios处理错误
- ESLint解析错误:意外的令牌