insertAdjacentHTML を Firefox でやる

CATEGORYjavascript
前に書いたの は、これがやりたかったんだよね。
insertAdjacent.js
どっかで見たことあるんですが見つからない…というわけでfxでinsertAdjacent系が利用できるものをつくりました。

多分、これ のパクリだと思うんだけど、完成度はこちらのほうが高いな。

  • namespace を汚染しない
  • 適切なインデントで意図が分かりやすい

リスペクトの意味をこめて、ここでもコードを貼っ付けておこう。
(function() {
if ('HTMLElement' in this) {
if('insertAdjacentHTML' in HTMLElement.prototype) {
return
}
} else {
return
}

function insert(w, n) {
switch(w.toUpperCase()) {
case 'BEFOREEND' :
this.appendChild(n)
break
case 'BEFOREBEGIN' :
this.parentNode.insertBefore(n, this)
break
case 'AFTERBEGIN' :
this.insertBefore(n, this.childNodes[0])
break
case 'AFTEREND' :
this.parentNode.insertBefore(n, this.nextSibling)
break
}
}

function insertAdjacentText(w, t) {
insert.call(this, w, document.createTextNode(t || ''))
}

function insertAdjacentHTML(w, h) {
var r = document.createRange()
r.selectNode(this)
insert.call(this, w, r.createContextualFragment(h))
}

function insertAdjacentElement(w, n) {
insert.call(this, w, n)
return n
}

HTMLElement.prototype.insertAdjacentText = insertAdjacentText
HTMLElement.prototype.insertAdjacentHTML = insertAdjacentHTML
HTMLElement.prototype.insertAdjacentElement = insertAdjacentElement
})()

ちょっとだけ、スタイルを自分好みにしてる :-)

そうだ、テストコードも書いておこう。




TARGET





わけあって、大量にある IE バリバリのページを Firefox で(ある程度...)きちんと動かしたいな、ということもあり、元のコードを変えずに対応するやり方をいろいろ探してる。

今、悩んでいるのは event.srcElement

document.getElementByTagNames("*") で、全部の要素を拾って、ひとつひとつイベントハンドラを書き換えていけばどうにかなりそうなことは分かったんだけど、込み入ったページも結構あるので、パフォーマンスが気になるところ。

attachEvent と addListner をラップした API を用意して、元のコードを地道に変更していくのが早いかな、と思ったりもする...
関連記事
スポンサーサイト

クロスブラウザ

0 Comments

Leave a comment