iframe'de jQuery UI oluşturulabilir

Question

Bir sayfada iframe'im var. Bu iframe'de, sıralanabilir olması gereken öğelerden oluşan bir koleksiyon. Javascript'in tamamı ana sayfada çalıştırılıyor. Ben bağlamını kullanarak sıralanabilir iframe belgede listesine erişmek ve oluşturabilirsiniz: aslında öğeleri sıralamak için çalışırken

var ifrDoc = $('#iframe').contents(); 

$('.sortable', ifrDoc).sortable({ cursor: 'move' }); 

Ancak, bazı anormal davranış alıyorum. Bir öğe tıklandığında, komut dosyasının hedefi dış belgeye geçer. Iframe'i farenin dışına taşırsanız, öğeyi hareket ettirebilir ve tıklayarak geri bırakabilirsiniz, ancak iframe içinde bununla etkileşime giremezsiniz.

Örnek: http://robertadamray.com/sortable-test.html

Yani, yapmak istediğim ulaşmak için bir yol yoktur - tercihen jQuery UI kodunda etrafında hack gitmek zorunda kalmadan?

Answer 1

iframe (demo) jQuery ve jQuery UI ekleyin:

$('iframe') 
    .load(function() { 
     var win = this.contentWindow, 
      doc = win.document, 
      body = doc.body, 
      jQueryLoaded = false, 
      jQuery; 

     function loadJQueryUI() { 
      body.removeChild(jQuery); 
      jQuery = null; 

      win.jQuery.ajax({ 
       url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js', 
       dataType: 'script', 
       cache: true, 
       success: function() { 
        win.jQuery('.sortable').sortable({ cursor: 'move' }); 
       } 
      }); 
     } 

     jQuery = doc.createElement('script'); 

     // based on https://gist.github.com/getify/603980 
     jQuery.onload = jQuery.onreadystatechange = function() { 
      if ((jQuery.readyState && jQuery.readyState !== 'complete' && jQuery.readyState !== 'loaded') || jQueryLoaded) { 
       return false; 
      } 
      jQuery.onload = jQuery.onreadystatechange = null; 
      jQueryLoaded = true; 
      loadJQueryUI(); 
     }; 

     jQuery.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'; 
     body.appendChild(jQuery); 
    }) 
    .prop('src', 'iframe-test.html'); 

Güncelleme: jQuery UI tutan ve jQuery UI oldu sayfanın window ve document başvurular kullanırAndrew Ingram is correct yüklendi. JQuery/jQuery UI öğesini iframe'e yükleyerek, doğru referanslara (dış belgeden ziyade iframe için) sahiptir ve beklendiği gibi çalışır.Güncelleme 2

---

: orijinal kod parçacığı ince bir sorunu vardı: dinamik script etiketleri yürütme sırası garanti edilmez. JQuery hazır olduğunda jQuery UI'nin yüklenmesini sağladım.

Ayrıca gety'nin kodunu load LABjs dynamically'a ekledim, böylece yoklama gerekli değildir. Bunun yerine yükleme jQuery ve jQueryUI iFrame içinde ve ebeveyn ve çocuk hem jQueryUI etkileşimlerini değerlendirmek

Answer 2

Kodunuzun neden çalışmadığını bilmiyorum. Olması gerektiği gibi görünüyor. sözü

, burada bu özelliği uygulamak için iki alternatif yolu vardır:

1. Eğer iframe-test.html içine ana belgeden JavaScript'inizi Taşı iframe
   
   değiştirebilirsiniz edin. Bu en temiz yol olabilir, çünkü JavaScript'i gerçekte üzerinde çalıştığı öğelerle birleştirir.

2. sadece içerik yerine HTML iframe almak için ana belgeyi
   
   Kullanım jQuery .Load() yöntemini kontrol ederse
   
   http://dl.dropbox.com/u/3287783/snippets/rarayiframe/sortable-test.html.
   
   http://dl.dropbox.com/u/3287783/snippets/rarayiframe2/sortable-test.html

Answer 3

onların javascript biraz Kampanya Monitör temelde jQuery UI özel bir sürümünü alarak bu çözer ile üstlendiğinden. Belge ve pencereye yapılan başvuruları, söz konusu öğe için belgeyi ve pencereyi alan kodla değiştirmek için ui.mouse ve ui.sortable öğelerini değiştirdiler. document

this.element[0].ownerDocument olur ve onları this.element.window() veya benzeri ile window yerine sağlar özel bir jQuery işlevi denir pencere() var. Dinamik

Answer 4

- yapabilirsiniz basitçe kabarcık ebeveynin belgeye fare olaylar:

var ifrDoc = $('#iframe').contents(); 

$('.sortable', ifrDoc).on('mousemove mouseup', function (event) { 
    $(parent.document).trigger(event); 
}); 

tüm Javascript değerlendirmek Bu şekilde Ebeveynin belge bağlamında.