JS小部件（使用Jquery）與主機頁上的Prototype衝突

Question

我正在向其他站點提供Javascript小部件，並且我在小部件中使用Jquery似乎與主機站點使用Prototype相沖突。

這裏你可以看到在行動的衝突： 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給我的錯誤是： invalid array length在Prototype.js中，但是當我展開詳細信息時，它引用了jquery.min.js，所以這讓我相信這兩者是衝突的。

我的窗口小部件的代碼完全是在一個匿名函數，並使用負載Jquery的亞歷克斯Marandon這裏描述的模型： http://alexmarandon.com/articles/web_widget_jquery/

我使用的是noConflict電話，但也許它不工作，我把它的方式嗎？

這裏是我的插件腳本的開始它包含jquery.min.js和jQueryUI的參考文獻：

(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 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腳本中的移動調用引起的。

讓我們嘗試在Firebug的沒有原型加載：

>>> [].shift() 
    undefined 

現在您的網頁上：

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

顯然你不是有這個問題只有一個：http://tommysetiawan.com/post/7887390641/jquery-and-prototype-conflict-array-shift

不幸的是，jQuery的noConflict無助於此。這個問題似乎在更新版本的Prototype中得到了解決，所以如果你對主機頁面有任何控制權，它可能有助於更新它的Prototype版本。事實上，它已經導致與另一個腳本的錯誤可能是一個很好的說服說服該頁面的所有者來解決它。否則，您可能需要修改您的小部件，以便它不會調用Array.shift，或者您甚至可以嘗試以修復它的方式對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以防止代碼的雙重執行。