Question

我正在尝试为jQuery元素获取一致的跨浏览器outerHtml，尤其是$("html").outerHtml()。例如，如果页面源是这样的：

<html><script src="blah.js"></script><div class="foo"   id='bar'></p></div></html>

我希望能够使用$("html").outerHtml();来获取包含元素本身的HTML字符串，其中包括：

<html><script src="blah.js"></script><div class="foo" id="bar"><p></p></div></html>

我一直在使用Brandon Aaron的outerHtml plugin看起来像这样：

return $('<div>').append($("html").first().clone()).html();

然而，这似乎实际上是尝试重新加载文档中的任何外部引用的文件（脚本，样式表），这对于获取包装元素的HTML源来说似乎相当多。 Javascript甚至可以将HTML元素放在DIV元素中吗？

在本地，我收到此错误。与AJAX规则有关吗？

XMLHttpRequest无法加载file：/// C：/demo.js？_ = 1311466511031。 Access-Control-Allow-Origin不允许使用null。

有没有更好的方法来获取outerHtml？这样做我真的很想避免任何网络电话。

Answer 1

写了我自己的解决方案，它只是渲染包装元素：

(function($){
  $.fn.outerHtml = function() {
    if (this.length == 0) return false;
    var elem = this[0], name = elem.tagName.toLowerCase();
    if (elem.outerHTML) return elem.outerHTML;
    var attrs = $.map(elem.attributes, function(i) { return i.name+'="'+i.value+'"'; }); 
    return "<"+name+(attrs.length > 0 ? " "+attrs.join(" ") : "")+">"+elem.innerHTML+"</"+name+">";
  };
})(jQuery);

https://gist.github.com/1102076

Answer 2

来自https://github.com/darlesson/jquery-outerhtml的jQuery outerHTML插件在存在时使用浏览器的本机outerHTML，因为第二个选项克隆临时文档片段中的节点并返回其innerHTML或使用类似于Brandon Aaron插件的jQuery克隆解决方案。

此插件可帮助您避免加载参考文件。在我的Chrome，Firefox和Internet Explorer测试中，在使用外部JavaScript文件的页面中调用下面的代码时没有发生此问题。

    var outerHTML = $(document.documentElement).outerHTML();

有没有办法更好地获取outerHtml？

2 个答案: