JS 위젯 (Jquery 사용)이 호스트 페이지의 Prototype과 충돌합니다

Question

다른 사이트에 자바 스크립트 위젯을 제공하고 있으며 위젯에서 Jquery를 사용하는 것이 호스트 사이트의 프로토 타입 사용과 충돌하는 것 같습니다.

현재 작업에 충돌 볼 수 있습니다

: 녹색 버튼을 클릭, 페이지 오른쪽에 http://www.phillyrealestateadvocate.idxco.com/idx/8572/results.php?lp=100000&hp=500000&sqFt=0&bd=2&ba=0&searchSubmit=&city%5B%5D=131

버튼을 "질문하기"- 그것은 바로 당신이를 여는 팝업를 생성 할 것이다 팝업 "잘못된 배열 길이"오류가 JS 콘솔에 롤인되기 시작합니다 (중지하지 마십시오). 팝업은 닫을 수 없지만 여전히 드래그 가능합니다. 팝업 내의 코드/내용은 iframe에 있으므로 정상적으로 작동하지만 팝업이 닫히지 않습니다.

Firebug에서 제공하는 오류는 Prototype.js에 invalid array length입니다.하지만 자세한 내용을 보려면이 항목을 확장하면 jquery.min.js에 대한 참조가 포함되어 있으므로이 두 가지가 충돌하는 것으로 생각됩니다.

내 위젯 코드는 익명 함수에 전적으로,로드 JQuery와 알렉스 Marandon에 의해 여기에 설명 된 모델 사용 : http://alexmarandon.com/articles/web_widget_jquery/

가 나는 noConflict 호출을 사용하고,하지만 아마도 그것은 내가 그것을 배치하는 방법을 작동하지 않습니다?

이

(function() { 

     // Localize jQuery variable 
     var jQuery; 

     /******** Load jQuery if not present *********/ 
     if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.6.2') 
     { 
      var script_tag = document.createElement('script'); 
      script_tag.setAttribute("type","text/javascript"); 
      script_tag.setAttribute("src", 
       "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"); 
      script_tag.onload = scriptLoadHandler; 
      script_tag.onreadystatechange = function() { // Same thing but for IE 
       if (this.readyState == 'complete' || this.readyState == 'loaded') { 
        scriptLoadHandler(); 
       } 
      }; 
      // Try to find the head, otherwise default to the documentElement 
      (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
     } 
     else 
     { 
      $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" , 
       function() 
       { 
        // The jQuery version on the window is the one we want to use 
        jQuery = window.jQuery; 
        main(); 
       } 
      ); 
     } 

     /******** Called once jQuery has loaded ******/ 
     function scriptLoadHandler() 
     { 
      $.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" , 
       function() 
       { 
        // Restore $ and window.jQuery to their previous values and store the 
        // new jQuery in our local jQuery variable 
        jQuery = window.jQuery.noConflict(true); 
        main(); 
       } 
      ); 
     } 

     /******** Our main function ********/ 
     function main() 
     { 

      // Do a bunch of stuff here 

    } 

})(); // We call our anonymous function immediately 

이 어떤 도움이 많이 주시면 감사하겠습니다 :

여기 jquery.min.js 및 jqueryui에 대한 참조를 포함 내 위젯 스크립트의 시작입니다!

편집 : 위젯 내에서 Jquery UI를 직접 사용할 수 있으므로 getScript 호출을 모두 제거했습니다. 불행하게도, 이것은 분쟁을 해결하지 못했습니다.

(function() { 

    // Localize jQuery variable 
    var jQuery, 

    /******** Load jQuery if not present *********/ 
    if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.6.2') 
    { 
     var script_tag = document.createElement('script'); 
     script_tag.setAttribute("type","text/javascript"); 
     script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"); 
     script_tag.onload = scriptLoadHandler; 
     script_tag.onreadystatechange = function() { // Same thing but for IE 
      if (this.readyState == 'complete' || this.readyState == 'loaded') { 
       scriptLoadHandler(); 
      } 
     }; 
     // Try to find the head, otherwise default to the documentElement 
     (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
    } 
    else 
    { 
     jQuery = window.jQuery; 
     main(); 
    } 

    /******** Called once jQuery has loaded ******/ 
    function scriptLoadHandler() 
    { 
     jQuery = window.jQuery.noConflict(true); 
     main(); 
    } 

    /******** Our main function ********/ 
    function main() 
    { 

Answer 1

Prototype은 기본 Array.shift 메서드를 완전히 호환되지 않는 방식으로 재정의합니다. jQuery는 기본 동작을 기대합니다.

실제로 jQuery에만 문제가 발생하지는 않습니다. 페이지가로드 될 때 해당 페이지에로드 된 curfon-yui.js 스크립트에서 이동 호출로 인해 비슷한 오류가 발생합니다.

의로드 프로토 타입없이 방화범을 해보자 :

페이지에 이제

>>> [].shift() 
    undefined 

: http://tommysetiawan.com/post/7887390641/jquery-and-prototype-conflict-array-shift

: 분명히이 문제가 할 수있는 유일한 사람이있어

>>> [].shift() 
RangeError: invalid array length 
this[i]=this[i+1];this.length--;return...ct).join(': ');}).join(', ')+'}>';}} 

jQuery의 noConflict는이 문제에 도움이되지 않습니다. 이 문제는 Prototype의 최신 버전에서 해결되는 것으로 보이므로 호스트 페이지를 제어하면 Prototype 버전을 업데이트하는 데 도움이 될 수 있습니다.다른 스크립트에서 이미 오류가 발생했다는 사실은 해당 페이지의 소유자가이를 고치도록 설득하는 좋은 방법 일 수 있습니다. 그렇지 않으면 위젯을 수정하여 Array.shift를 호출하지 않거나 Monkey-patch Array.shift를 수정하는 방법으로 시도 할 수도 있습니다.

Answer 2

당신은 function scriptLoadHandler(){ 직후 jQuery.noConflict()을 정의 할 수 있습니다 : 여기에 새로운 코드입니다. 현재 UI 플러그인을로드 한 후 noConflict()으로 전화를 걸었습니다. 너무 늦었습니다.

var hasLoaded = false; 
function scriptLoadHandler() 
    { 
     if(hasLoaded) return; 
     hasLoaded = true; 
     window.jQuery = jQuery.noConflict(true); 
     jQuery.getScript("https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" , 
      function(){ 
       main(); 
      } 
     ); 
    } 

업데이트 : 코드가 두 번 실행되지 않도록하기 위해 hasLoaded이 추가되었습니다.