잡동사니 블로그

function test1(){
  J("#testDiv").html('test1<'+'script>alert(1);<'+'/script>');
 }
 function test2(){
  document.getElementById('testDiv').innerHTML='test2<'+'script>alert(1);<'+'/script>';
 }
 function test3(){
  var script = document.createElement('script');
  script.innerHTML='alert(1);';
  document.getElementById('testDiv').appendChild(script);
 }

<a onclick="test1();">test1</a>
<a onclick="test2();">test2</a>
<a onclick="test3();">test3</a>

<div id="testDiv">
</div>

jquery환경에서 테스트하면

1,3 번은 출력되고 2번은 안된다.

jquery는 내부적으로 append를 통해서 동작하기 때문에

script를 실행시 script가 실행된다.

fancybox를 사용하다가 이상하다고 생각해서 찾아봄

fancybox에

J(document).ready

를 선언해서 사용하면

이게 정상적으로 동작하는게 이상해서..

function test1(){
  J(document).ready(function(){
   alert(1);
  });
 }

 function test2(){
  window.onload=function(){
   alert(2);
  }

 }

//]]>

<a href="#" onclick="test1();">test1</a>
<a href="#" onclick="test2();">test2</a>

라는 소스가 있으면

test1은 출력을 하지만

test2는 출력하지 않음

우리가 보통 window.onload 혹은

body.onload 대용의 느낌으로 ready를 사용하는데

실제로는 차이가 있다.

나도 저걸 테스트 하기전에는

ready는

onload 이벤트를 attach하는거라고 생각했다.

실제로 jquery를 보면

if ( document.readyState === "complete" ) {
   // Handle it asynchronously to allow scripts the opportunity to delay ready
   setTimeout( jQuery.ready );

  // Standards-based browsers support DOMContentLoaded
  } else if ( document.addEventListener ) {
   // Use the handy event callback
   document.addEventListener( "DOMContentLoaded", completed, false );

   // A fallback to window.onload, that will always work
   window.addEventListener( "load", completed, false );

  // If IE event model is used
  } else {
   // Ensure firing before onload, maybe late but safe also for iframes
   document.attachEvent( "onreadystatechange", completed );

   // A fallback to window.onload, that will always work
   window.attachEvent( "onload", completed );

   // If IE and not a frame
   // continually check to see if the document is ready
   var top = false;

   try {
    top = window.frameElement == null && document.documentElement;
   } catch(e) {}

   if ( top && top.doScroll ) {
    (function doScrollCheck() {
     if ( !jQuery.isReady ) {

      try {
       // Use the trick by Diego Perini
       // http://javascript.nwbox.com/IEContentLoaded/
       top.doScroll("left");
      } catch(e) {
       return setTimeout( doScrollCheck, 50 );
      }

      // detach all dom ready events
      detach();

      // and execute any waiting functions
      jQuery.ready();
     }
    })();
   }
  }

이런부분이 있다

현재 문서상태가 complete가 아니면 onload이벤트에 넣고

complete이면 바로 실행시키는것

if ($.browser.mozilla || $.browser.opera) {
    c.bind("textchange", function(a, b) {
     $.check(c, e.indicator, parseInt(e.limit), e.twice);
    });
   } else {
    c.bind("keyup", function(a) {
     $.check(c, e.indicator, parseInt(e.limit), e.twice);
    });
   }

이런식으로 textarea를 위한 byte체크를 위해서 분기를 하는 부분이 있었는데

ie11은 $.browser.mozilla 가 true이다

해서 찾아보니

http://serpiko.tistory.com/370

이런글이 있네

내용에 보면 ie11에는 navigator.userAgent에 MSIE가 없어서 생기는 오류인듯

http://www.slideshare.net/netil/ie11-201310

이것도 한번 읽어볼것

눈여겨볼 내용은

ie11이전까지는 attachEvent를 사용했으나 이제는

다른브라우저들과 마찬가지로 addEventListener를 사용하게 된것