iframe에서 작업을 인식하는 경우

Question

iframe이 있으므로 iframe의 특정 버튼을 클릭 할 때마다 alert과 같은 작업을 수행하고 싶습니다. 그러나 다음 코드는 사실

$('.class_name').click(function(){ 
    alert('Clicked');  
}); 

작동하지 않습니다, 그것은 습관도 alert iframe이가 (위와 같은 코드이다, 그러나 .class_name이 iframe이되는 곳)을 클릭 할 때.

나는 해결책을 this question에서 봤는데, 여전히 작동하지 않았다!

This is a jsfiddle 문제를 잘 설명해야합니다.

제 질문은 : 왜 iframe 내부의 내용과 실제 iframe을 클릭하면 Jquery가 인식하지 못합니까?

편집 :

내가 내 jsfiddle 늘 일 때문에, 다른 도메인에 iframe이와 통신 할 수 있음을 이해 ...하지만 나는 같은에 호스팅하고있는 사이트에서 작동하지 않습니다 도메인을 iframe으로 ...

Answer 1

iframe이 바이올린에서와 같이 다른 도메인에서 온 경우 JavaScript 코드는 내용에 전혀 액세스 할 수 없습니다.

@Max 밖으로 poins, 당신은 postMessage() 사용할 수 있습니다 또는 URL 조각이 그 측면에서이 통신을 처리하기 위해이있는 iframe 코드가 경우, 다른 도메인에 iframe이와 통신하기 위해 해킹.

iframe에서 tumblr.com을 사용하면 설명서를 확인하여 iframe에서이 페이지를 사용하고 도메인 장벽을 넘어 통신하는 방법에 대해 이야기하고 있는지 확인할 수 있습니다.

이제 iframe이 과 동일한 도메인의 iframe에 대해 이야기하고 있다면 쉽게 알 수 있습니다. 변수에 iframe 요소가 myframe 인 경우 myframe.contentWindow을 사용하여 window 개체를 가져오고 myframe.contentWindow.document 개체를 document 개체로 가져올 수 있습니다. 거기에서 필요한 것을 할 수 있습니다. 예를 들어 :

var $myframe = $('#myframe'), 
    myframe = $myframe[0], 
    myframewin = myframe.contentWindow, 
    myframedoc = myframewin.document; 

$(myframedoc).find('a').on('click', function() { 
    alert('Clicked!'); 
}); 

당신은 여전히 ​​iframe에 일을 액세스하기 위해 메인 페이지에 jQuery를의 사본을 사용하여 몇 가지 문제가있을 수 있지만 최신 버전으로 더 좋은 행운이 있어야합니다. 최악의 경우에 네이티브 DOM 이벤트와 메소드를 사용할 수 있지만 jQuery는 this updated fiddle에서 작동합니다.

이 바이올린은 iframe에 내용을 넣기 위해 document.write를 사용하지만 프레임에 액세스하는 jQuery 코드는 같은 방법입니다. 물론주의해야 할 것은 iframe에 액세스하려고 할 때 iframe이 완전히로드되었는지 여부입니다. 당신이 포함 된 페이지에서 iframe 요소에 load 이벤트를 수신 할 수

는 생각 하지만, 최악의 경우 당신은 setTimeout() 또는 setInterval()을 사용하고 사용할 수있게하는 찾고있는 요소를 기다릴 수있다.

Answer 2

iFrame은 완전히 다른 프레임이므로 보안상의 문제가 있습니다.예를 들어 은행 로그인 페이지를 iFrame에로드하고 js를 사용하여 필드 값을 가져올 수 있다고 상상해보십시오. 특히 다른 도메인으로

는, 당신이 시작 얻어야한다 JS-와 통신하는 데 훨씬 어렵습니다 : How to communicate between iframe and the parent site?이