[개인노트] 북마크렛으로 새 버전의 jQuery를 덮어쓰고 싶어요.

동기


북마크렛을 만들고 싶을 때, 이미 준비된 기존 사이트에서
이전 jQuery override를 새 버전으로 불러오고 싶습니다.
$.parseHTML 사용할 수 없는 환경을 만났기 때문에 적어 두세요.
($.parseHTML은 jQuery1.8부터 사용할 수 있습니다...)

동작 확인 환경

  • Mac OS X 10.10
  • Google Chrome Version 38.0.2125.111
  • 이전 jQuery 라이브러리 로드 상태


    1.11.1 로드 상태
    <!DOCTYPE html>
    <html>
      <head>
      <script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
      </head>
      <body>
        <div>
          <script type="text/javascript">
            console.log('jQuery version is: ' + $.fn.jquery);
          </script>
        </div>
      </body>
    </html>
    
    console.log 출력 결과 1.11.1

    새 버전의 jQuery를 불러오고 싶습니다!


    이 경우 덮어씁니다.
    $을(를) 비활성화해야 하기 때문에
    $.noConflict().
    예를 들어 북마크렛으로 덮어쓰고 싶은 상황을 나타냅니다.

    다음 북마크렛을 준비하세요.

    (function() {
      function getJQueryVersion() {
        console.log('$.fn.jquery : ' + $.fn.jquery);
      }
    
      var jq = document.createElement('script');
      jq.src = 'http://code.jquery.com/jquery-2.1.1.min.js';
      jq.onload = getJQueryVersion;
      console.log('jQuery.fn.jquery : ' + jQuery.fn.jquery);
      $.noConflict();
      document.body.appendChild(jq);
    })();
    
    미니파이 준비물
    ((function(){function e(){console.log("$.fn.jquery version: "+$.fn.jquery)}var t=document.createElement("script");t.src="http://code.jquery.com/jquery-2.1.1.min.js";t.onload=e;console.log(jQuery.fn.jquery);$.noConflict();document.body.appendChild(t)})());
    

    책갈피로 책갈피에 추가


    Chrome의 Bookmarkmanager(chrome://bookmarks/) 등록
    javascript:(function(){function e(){console.log("$.fn.jquery version: ");console.log($.fn.jquery)}var t=document.createElement("script");t.src="http://code.jquery.com/jquery-2.1.1.min.js";t.onload=e;console.log(jQuery.fn.jquery);$.noConflict();document.body.appendChild(t)})()
    

    실행해 보다



    달러가 새 버전의 물건에 덮여 있는 것을 발견했다.

    북마크렛에서 새로운 jQuery 버전을 사용하고 싶다면

  • DOM 구토로 사용
  • $.noConflict();
  • document.createElemnet('script').onload를 위한 jQuery 자원 불러오는 연결 함수 준비
  • 이런 느낌인가요?

    좋은 웹페이지 즐겨찾기