Как расширить объект javascript таким образом, чтобы в браузерах, которые изначально не имеют externalHTML, я мог определить его? - PullRequest
Новая
       40

Как расширить объект javascript таким образом, чтобы в браузерах, которые изначально не имеют externalHTML, я мог определить его?

4 голосов
/ 12 декабря 2011

Я нашел эту функцию (хотя я забыл, где): 

function outerHTML(node){
    // if IE, Chrome take the internal method otherwise build one
  return node.outerHTML || (
      function(n){
          var div = document.createElement('div'), h;
          div.appendChild( n.cloneNode(true) );
          h = div.innerHTML;
          div = null;
          return h;
      })(node);
}

но эта функция работает, вызывая outerHTML(my_element) вместо my_element.outerHTML

Я хочу иметь возможность расширять объект элемента DOM javascript таким образом, чтобы он содержал элемент externalHTML, но все еще использовал собственный, если он существует. как мне это сделать?

Основная причина, почему я хочу сделать это таким образом, заключается в том, что Firefox изначально не имеет метода externalHTML, но я все еще хочу использовать нативные реализации, если они доступны, так как они были тщательно протестированы, и я чувствую, что могу доверяй им.

UPDATE: @Raynos предложил, чтобы я не делал выше для externalHTML, и что я должен сделать что-то вроде спецификаций externalHTML. Я нашел это: Как мне сделать OuterHTML в Firefox? и это не делает .cloneNode, который может вызвать ошибки в FireFox 8.0.1.
Итак, мое решение таково, согласно @Raynos: 

if (!("outerHTML" in HTMLElement.prototype)) {
    Object.defineProperty(HTMLElement.prototype, "outerHTML", {
        get: getOuterHTML
    });
}


function getOuterHTML(){
    var parent = this.parentNode;
    var el = document.createElement(parent.tagName);
    el.appendChild(this.cloneNode(true));
    var shtml = el.innerHTML;
    return shtml;
}

Ответы [ 3 ]

8 голосов
/ 12 декабря 2011

Вы обычно делаете что-то вроде: 

if (!("outerHTML" in document.body)) {
    Object.defineProperty(Element.prototype, "outerHTML", {
        get: getOuterHTML,
        set: setOuterHTML
    });
}

Затем вы читаете externalHTML-спецификацию и пишете getOuterHTML и setOuterHTML функции, которые ее реализуют.

Примечание: Я настоятельно рекомендую не наивно реализовывать свойство outerHTML, которое не соответствует спецификациям. Это может вызвать проблемы с обслуживанием, когда ваша «версия» работает не так, как собственная версия. Особенно, если вы добавите дополнительные расширения или дополнительные «функции» в вашу версию

Обратите внимание, что Object.defineProperty не определено в старых браузерах. Возможно, вам придется использовать прокладку из es5-shim

1 голос
/ 12 декабря 2011

Добавьте его к прототипу HTMLElement 

HTMLElement.prototype.outerHTML =  function() {
      // Your implementation of getting outerHTML
}
0 голосов
/ 13 декабря 2011

Возможно, вы захотите попробовать расширить базовый объект Node, от которого распространяется почти весь DOM, читайте здесь для описания элемента Элемент - MDN или, как другие ответили, попробуйте HTMLElement, прочитанный здесь также из MDN - HTMLElement 

Element.prototype.outerHTML = function(){ console.log('hola'); };
HTMLElement.prototype.outerHTML = function(){ console.log('hola'); };

as Raynos в комментариях, указанных здесь, есть статья Spec, которая поощряет использование Element .

Редактировать: Удалены ссылки на узлы

...