Javascript获取当前页面的html答案

【问题标题】：Javascript get html of current pageJavascript获取当前页面的html
【发布时间】：2013-07-03 15:09:55
【问题描述】：

是否可以通过用户所做的所有修改来获取页面的 html（见下文）？

例如，如果文本已输入到文本区域，或已选中复选框，则该内容也应反映在 html 中。我想要这样做的原因是对用户页面进行“截图”。

下面的答案是jQuery('html') 的变体，不反映用户所做的更改。

【问题讨论】：

javascript page source code 的副本。那是 the second question 大约一个小时内。
@FelixKling 这是怎么重复的？另一个问题只是询问页面的 html。我希望在 textareas 中输入的文本、选中的复选框等反映在 html 中
啊，我错过了input-changes 部分。短语“用户所做的修改” 是相当含糊的。 DOM 修改也是修改（可能会响应用户交互而发生）。
相关：stackoverflow.com/q/11632238/218196
真的，页面的图片是你在哪里找的？这一定是我见过的问题中对问题的最糟糕的描述？

标签： javascript html dom

【解决方案1】：

如果您想要屏幕截图，您应该考虑使用诸如html2canvas 之类的工具。仅拉取 HTML 不会为您提供输入字段。

Another SO thread along these lines.

其他答案将为您提供 HTML，特别是，但没有输入的值

$('html').html();

【讨论】：

谢谢，虽然 html2canvas 很重，但估计也没办法了。

【解决方案2】：

你可以使用 jQuery：

var html = $('html')

【讨论】：

除了这个还能给什么？
hmmmm... 看起来很复杂。有没有更简单的方法？
@musefan : 是的，你可以减少用于 var 的字符数 :)
这不起作用。例如，如果我在 textarea 中有文本，它不会反映在 html 中。
@LanguagesNamedAfterCofee - 不，不是，当用户键入内容时，标记中的 value 属性不会更新， value 属性是，所以如果您的目标是从表单元素中获取用户输入的文本，那么整个页面的标记是不是的方式。

【解决方案3】：

根据其他答案进行调整。在获取 HTML 之前，您可以遍历所有输入元素并手动设置 value 属性，然后这将反映在 HTML 中：

$('a').click(function(e){
    setValueProperties();
    var html = getHtml();
    alert(html);
});

function setValueProperties(){
    $('input').each(function(){
       $(this).attr("value", $(this).val()); 
    });
}

function getHtml(){
    return document.documentElement.outerHTML;
}

Here is a working example

And here is an example that supports checkboxes

注意：您可能需要根据您的确切需求优化此功能，但希望它能让您按自己的需要走上正轨。

【讨论】：

【解决方案4】：

如果你有一个名为“field”的字段：

var field = document.getElementById("field");
fieldvalue= field.value;

如果您有一个复选框，则操作实际上是相同的。希望这对您有所帮助。

【讨论】：