콘텐츠를 삽입 한 후에 Iframe의 클릭 핸들러가 작동하지 않습니다.

저는 현재 작은 styleguide 응용 프로그램에서 작업 중이며 기능의 일부는 특정 모듈이 iframe에로드 될 수있는 샌드 박스 영역이 있다는 것입니다 미디어 쿼리를 시뮬레이션). 이제이 콘텐츠는 iframe이 관련 스타일 및 스크립트와 함께 생성 된 후에 동적으로 삽입됩니다.콘텐츠를 삽입 한 후에 Iframe의 클릭 핸들러가 작동하지 않습니다.

비 이벤트 처리기 스크립트는 경고 상자와 같이 잘 작동하지만 클릭 핸들러는 작동하지 않는 것 같습니다. Jquery는 괜찮아서로드가 배제되었습니다. 그것의 부모로부터

이

코드는 iframe을의 HTML 안에 직접 넣어되고, 코드의 샘플을 그냥 명확히

<!-- Accordion--> 
<div class="accordion module-suggestions col-sm-3 col-xs-12 pull-right hidden-xs"> 
      <h4>Most popular</h4> 
      <div class="accordion-section active"> 
       <ul> 
        <li>Why your CCTV could land you in jail<span class="result-type case-study"></span> 
        </li> 
        <li>How to measure performance of SMEs<span class="result-type guides"></span> 
        </li> 
        <li>How to measure performance <span class="result-type checklist"></span> 
        </li> 
       </ul> 
      </div> 
      <h4>Most recent</h4> 
      <div class="accordion-section"> 
       <ul> 
        <li>Why your CCTV could land you in jail<span class="result-type case-study"></span> 
        </li> 
        <li>How to measure performance of SMEs<span class="result-type guides"></span> 
        </li> 
        <li>How to measure performance <span class="result-type checklist"></span> 
        </li> 
       </ul> 
      </div> 
      <h4>Recommended</h4> 
      <div class="accordion-section"> 
       <ul> 
        <li>Why your CCTV could land you in jail<span class="result-type case-study"></span> 
        </li> 
        <li>How to measure performance of SMEs<span class="result-type guides"></span> 
        </li> 
        <li>How to measure performance <span class="result-type checklist"></span> 
        </li> 
       </ul> 
      </div> 
     </div> 
<!--/Accordion --> 

<script> 
function accordion() { 
    var accordion = $('.accordion h4'); 
    var accordionSection = $('div.accordion-section'); 
    $(accordion).on("click", function(e) { 

     if (!$(this).next(accordionSection).is(":visible")) { 
      $(accordionSection).is(":visible") && $(accordionSection).slideUp(); 
      $(this).next(accordionSection).slideDown(); 
     } 
    }); 
} 
accordion(); 
</script>

을 삽입, 나는 그것을 호출하고 있지 않다. .

는 Iframe으로 HTML/JS를 삽입해야하는 코드 :

iframePreview.contents하면() 검색 ("HTML") HTML (libraryScripts + '\ n'+ moduleHtmlAndJs).

이러한 클릭 핸들러를 어떻게 기능적으로 만들 수 있습니까?

출처

2015-01-27 Zak a

어디에서 accordion()을 (를) 호출합니까? –

스크립트 태그 내의 전체 내용이 iframe 내에서 실행 중입니다. –

대리인 클릭 이벤트 : http://learn.jquery.com/events/event-delegation/ –

slideToggle을 사용하고 핸들러에서 가장 근접한 accordion-section에 액세스하여이 작업을 단순화 할 수 있습니다.

이 시도 :

function accordion() { 
    $('.accordion').on("click","h4", function() { 
      var accordionSection = $(this).next('div.accordion-section'); 
      $(accordionSection).slideToggle(); 
    }); 
} 
accordion();

예 : http://jsfiddle.net/7fpt87yv/

출처

2015-01-27 12:04:41 loydall

불명확하지만 문제는 내 아코디언 코드가 아니기 때문에 iframe 외부에서 올바르게 작동합니다. 문제는 클릭 핸들러가 응답하지 않는 것입니다. –

그것은 보인다 .html() 스트립 밖으로 <script> 태그입니다.

How to prevent jquery from removing the <script> tags

시도 대신 .innerHTML를 사용 :

iframePreview.contents().find('html').[0].innerHTML = libraryScripts + '\n' + moduleHtmlAndJs;

출처

2015-01-27 12:07:12

내 아코디언 코드가 iframe 외부에서 완벽하게 작동합니다. 그것은 문제가 아닙니다. –

오히려 contentWindow 자체는 iframe이에 글로벌 수준의 기능을 만들 수 없습니다 iframe을에 스크립트를 주입보다 더?

예를 들어

iframePreview.contentWindow.accordion = function(){ 
     $('.accordion').on("click","h4", function() { ... etc...}); 
}

그런 다음 그 함수를 호출 당신이 당신의 HTML을 삽입 한 후 : 그래서

iframePreview.contentWindow.accordion();

- 당신은 iframe이의 부모 창에서 기능을 설정에서 호출 HTML이 제자리에 있으면 부모.

출처

2015-01-27 14:18:12 loydall

콘텐츠를 삽입 한 후에 Iframe의 클릭 핸들러가 작동하지 않습니다.

답변

관련 문제