有没有更好的方法来获得outerHtml？

我试图为jQuery元素获得一致的跨浏览器outerHtml，特别是$("html").outerHtml()。例如，如果页面的源代码是这样的：有没有更好的方法来获得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>

我一直在使用布兰登·艾伦的outerHtml plugin它看起来是这样的：

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

然而，这似乎确实尝试重新加载文档中的任何外部参照文件（脚本，样式表），为了获得包装元素的HTML源代码，这看起来很过分。 Javascript甚至可以将HTML元素放入DIV元素中？

本地，我得到这个错误。与AJAX规则有关吗？

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

有没有更好的方法来获得outerHtml？在做这件事时，我真的很想避免任何网络电话。

来源

2011-07-24 peterjwest

你确定你不想'body'的* inner * HTML吗？这些数据的目的是什么？ –

非常确定。我正在验证HTML或HTML片段。是的，我知道它与HTML源不一样。 – peterjwest

在查看通常解析HTML时，您始终可以对文档的位置执行单独的HTTP请求。但是，这并不能解决碎片问题。 –

写我自己的解决方案，它只是呈现缠绕元件：

(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

从 https://github.com/darlesson/jquery-outerhtml

来源

2011-07-24 01:21:58 peterjwest

您的解决方案忘记检测“el.outerHTML”。确定它是非标准的，但至少它更快。 – Raynos

谢谢，所以我只需要添加：'if（elem.outerHTML）return elem.outerHTML;'？ – peterjwest

并彻底测试您的垫片以与“outerHTML”相同的格式返回HTML。即outerHTML可能会以大写形式返回标签等。 – Raynos

jQuery的outerHTML插件使用浏览器的原生时存在的outerHTML，因为第二个选项克隆节点的临时文件片段并返回其innerHTML或使用类似于Brandon Aaron插件的jQuery克隆解决方案。

这个插件可能会帮助您避免参考文件的加载。在Chrome，Firefox和Internet Explorer的测试中，这个问题并没有在外部JavaScript文件的页面中调用下面的代码。

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

来源

2012-01-12 05:40:01 Darlesson

这看起来很有前途，谢谢，我会试试看！ – peterjwest

有没有更好的方法来获得outerHtml？

回答

相关问题