javascript - 有没有更好的方法来获取 outerHtml?

标签 javascript jquery html ajax

我正在尝试为 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 cannot load file:///C:/demo.js?_=1311466511031. Origin null is not allowed by Access-Control-Allow-Origin.

有没有更好的方法获取outerHtml?我真的很想在执行此操作时避免任何网络调用。

最佳答案

写了我自己的解决方案,它只渲染了包装元素:

(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

关于javascript - 有没有更好的方法来获取 outerHtml?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6804248/

相关文章:

javascript - 在 jquery deferred 解析请求数组后总是调用一个 Action

javascript - 如何使用从 javascript 传递的变量加载 PHP 页面

javascript - 读取 JSON 并写入 HTML 表

Javascript 在手机上缩小

javascript - ExtJS4 变换组合框 onchange() 事件不起作用

javascript - NodeJS + Express 与 Ajax

javascript - 如何跟踪页面上移动的 div

javascript - 如何将表选择推送到数组 : jquery

javascript - jQuery sortable - 设置哪些 div 包含在其父容器中

javascript - jQuery动画滚动到某个点