Develop

[js] 파이어폭스(Firefox;F/F)에서 outerHTML 작동하도록 만든 메소드

by hooni posted Apr 23, 2013
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
outerHTML 파이어폭스(F/F)에서 쓰는 방법
outerHTML 파이어폭스(F/F)에서 쓰는 방법

<html>
<title>outerHTML 파이어폭스 대응</title>
<script>
/**************************************
* 샘플 코드 및 펑션 생성 @ 정민철
* http://tost.tistory.com
*
* 원본 참조소스
* http://snipplr.com/view/5460/outerhtml-in-firefox/
* http://www.phpschool.com/gnuboard4/bbs/
* board.php?bo_table=tipntech&wr_id=56477
***************************************/

//ff대응 outerhtml결과
function getouterHtml(obj)
{
  var html = null;
  //널처리
  if (obj == null) return null; 

  if (typeof(obj.outerHTML) == "string")
  {//스트링값을 가져온다면 IE로 가정함
    html =  obj.outerHTML;
    //alert("ie"); //디버그용
  }
  else
  {
    html = (new XMLSerializer).serializeToString(obj); 
    //alert("ff"); //디버그용
  }
  return html;
}

//ff대응 outerhtml 삽입
function setOuterHtml(obj, html)
{
  if (obj == null) return; //null처리

  if (typeof(obj.outerHTML) == "string")
  {//스트링값을 가져온다면 IE로 가정함
    //alert("ie"); //디버그용
    obj.outerHTML = html;
  }
  else
  {
    //alert("ff"); //디버그용
    var el = document.createElement('divs');
    el.innerHTML = html;
    var range = document.createRange();
    range.selectNodeContents(el);
    var documentFragment = range.extractContents();
    obj.parentNode.insertBefore(documentFragment, obj);
    obj.parentNode.removeChild(obj);
  }
}
</script>


<body>

  <divs id="test" style="background:yellow;">
    원래본문
  </divs>

  <script>
    var divsobj = document.getElementById("test");
  </script>

  <a href="javascript:alert(getouterHtml(divsobj))">
    outer값확인	
  </a>

  <a href="javascript:setOuterHtml(divsobj, 'htmltest')">
    outer값 변경
  </a>

</body>
<html>