iframe에서 정렬 가능한 jQuery UI 만들기

Question

페이지에 iframe이 있습니다. 이 iframe에는 정렬이 필요한 항목 모음이 있습니다. 모든 자바 스크립트가 상위 페이지에서 실행 중입니다. 나는 컨텍스트를 사용하여 정렬을 iframe이 문서의 목록에 액세스하고 만들 수 있습니다 실제로 항목을 정렬 할 때

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

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

그러나, 나는 몇 가지 이상한 행동을 받고 있어요. 항목을 클릭하면 스크립트의 대상이 외부 문서로 변경됩니다. iframe에서 마우스를 움직이면 항목을 이동하고 클릭하여 다시 놓을 수는 있지만 iframe 내에서 해당 항목과 상호 작용할 수는 없습니다.

예 : http://robertadamray.com/sortable-test.html

그래서, 내가 원하는 것을 달성 할 수있는 방법이 - 바람직 jQuery를 UI 코드 주위에 해킹 가지 않고는?

Answer 1

iframe을 (demo)에 jQuery를하고 jQuery를 UI를 추가

$('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'); 

업데이트 : jQuery를 UI가 보유하고 jQuery를 UI이었다 할 수있는 페이지 window 및 document에 대한 참조를 사용Andrew Ingram is correct 짐을 실은. jQuery/jQuery UI를 iframe에로드하면 올바른 참조 (외부 참조 문서가 아닌 iframe에 대한 참조)가 있고 예상대로 작동합니다.업데이트 2

---

: 원래 코드는 미묘한 문제가 있었다 : 동적 스크립트 태그의 실행 순서가 보장되지 않습니다. jQuery가 준비된 후에 jQuery UI가로드되도록 업데이트했습니다.

또한 getify의 코드를 load LABjs dynamically에 통합하여 폴링이 필요하지 않습니다. 대신로드 jQuery를하고 jQueryUI iframe을 내부와 부모와 자식 모두 jQueryUI 상호 작용을 평가

Answer 2

코드가 작동하지 않는 이유를 모르겠습니다. 그것이 있어야하는 것처럼 본다. 말했다

, 여기에이 기능을 구현하는 두 가지 다른 방법은 다음과 같습니다

1. 당신이 iframe-test.html에 부모 문서에서 자바 스크립트를 이동 iframe이
   
   을 수정 할 수 있습니다. JavaScript가 실제로 실행되는 요소와 연결되기 때문에 이것은 가장 깨끗한 방법 일 수 있습니다.

2. 만 내용 대신의 HTML은 iframe을 가져 부모 문서를
   
   사용의 jQuery .load() 메소드를 제어 할 경우
   
   http://dl.dropbox.com/u/3287783/snippets/rarayiframe/sortable-test.html.
   
   http://dl.dropbox.com/u/3287783/snippets/rarayiframe2/sortable-test.html

Answer 3

들은 자바 스크립트 조금, 캠페인 모니터는 기본적으로 jQuery를 UI의 사용자 지정 버전을함으로써이 문제를 해결 연주 데. ui.mouse와 ui.sortable을 수정하여 문서 및 창에 대한 참조를 문제의 요소에 대한 문서 및 창을 가져 오는 코드로 바꿉니다. document는

this.element[0].ownerDocument이되고 그들은 그들이 this.element.window() 또는 유사한로 window을 대체 할 수있는 사용자 정의의 jQuery 함수를 호출 창()를 가지고있다. 동적

Answer 4

- 할 수 있습니다 단순히 거품 부모의 문서에 마우스 이벤트 :

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

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

귀하의 모든 자바 스크립트를 평가할 수있는이 방법 부모의 문서 컨텍스트에서.