2011-02-06 8 views
2

iframe이있는 WYISWYG 편집기를 만들고 있습니다.자바 스크립트 : iFrame의 이벤트

문제는 내가 onKeyUp에 이벤트 추적하고 싶습니다 예를 들어 나는, 파이어 폭스와 오페라 (IE 테스트되지 않은)에 iframe이에 어떤 이벤트를 사용할 수 있다는 것입니다 :

document.getElementById("myFrame").onkeyup = function(){ 
    doSomething... 
} 

을하지만 일을하지 부모 창에서

top.frames[0].onkeyup = function(){ 
     doSomething... 
} 

하고 이런 것들의 모든 종류 :

내가이와 너무 iframe에 노력

top.document.frames[0].onkeyup 
top.frames["myFrame"].onkeyup 
top.frames[0].document.onkeyup 

그러나 그들 중 누구도 말에 그렇게 일을하고 싶어은 심지어 밝혀졌다 window.onclick가 작동하지 않으므로 조금 혼란스러워 ...

이 솔루션은 무엇입니까?

편집

문제는

+0

iframe이 다른 도메인에 있습니까? http://JSFiddle.net 예제를 게시 할 수 있습니까? –

+0

아니요 다른 도메인에 있지 않습니다. 소스가 있지만 두 파일 모두 localhost에 있습니다. 다른 HTML 파일을 iframe 소스로 추가 할 방법이 없다면 어떻게 예제를 게시해야합니까? – Adam

답변

8

내가 iframe 대응의 Document의 이벤트를 잡는 것이 좋습니다 것 iframe에 document.designMode = "on" 함께하는 것, 그리고 파이어 폭스에서 적어도 당신은 addEventListener()를 사용하여이 작업을 수행하기보다는 필요 onkeyup. 다음은 모든 주요 브라우저에서 작동합니다.

var iframe = document.getElementById("myFrame"); 
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; 

function handleIframeKeyUp(evt) { 
    alert("Key up!"); 
} 

if (typeof iframeDoc.addEventListener != "undefined") { 
    iframeDoc.addEventListener("keyup", handleIframeKeyUp, false); 
} else if (typeof iframeDoc.attachEvent != "undefined") { 
    iframeDoc.attachEvent("onkeyup", handleIframeKeyUp); 
} 
+0

클릭, 키 업 등과 같이 작동하지만 초점이나 흐림 효과는 없습니다. 어떤 아이디어? –

+0

@Nick :'focus'와'blur'는 거품을 내지 않으며 문서에서 실행되지 않습니다. iframe 요소 자체 또는 해당 창 ('iframe.contentWindow')에서 작동합니다. –

+0

Firefox에서 작동하는 것으로 밝혀졌지만 Safari와 Chrome이 iframe 요소 자체에 흐림/포커스 이벤트에 응답하지 않을 경우 해당 이벤트를 iframe 내의 body 요소에 바인딩해야했습니다. –