2017-04-24 1 views
5

iframe에서 포커스가있는 항목을 찾으려고하는데 실패했습니다!iframe에 포커스가있는 항목 찾기

iframe에 삽입 할 때마다 항목이 포커스가있는 것처럼 보입니다. 예를 들어 표를 삽입하면 커서는 항상 마지막 셀에 있습니다.

나는 그것이 작동하는지 확인하기 위해 셀의 배경 색상을 변경하려고 오전 I 시험으로

그러나 이것은 항상없는 항목이

var d1 = $.Deferred(); 

$.when(d1).then(function() {     
    var $iframe = $("#ifr").contents(); 
    var focused = $iframe.find(':focus'); 
    focused.css("background", "red"); 
    console.log(focused); 
}) 

d1.resolve(insertTable(html)); 

d1

를 삽입 된 iframe이 몸에 변화는 단지 전화입니다 execCommand()를 사용하여 iframe에 삽입하는 함수입니다.

집중된 요소를 찾고이 방법에 저장할 수 있습니까?

+0

iframe이로드 (iframe이 자체 제외) 집중하는 요소가 없기 때문에. 전나무 당신이 초점을 맞추기 위해 몇 가지 요소를 만들 필요가 있습니다. 그런 다음에 만 그 요소를 얻을 수 있습니다. –

+0

테이블을 삽입하면 커서가 셀 중 하나에서 활성화되므로 무언가가 집중되거나 활성화되어야합니까? 또한 테이블 크기 조정 핸들러가 활성화되어 있습니다 – JQuery

+0

당신이 직면 한 문제를 살펴보기 위해 바이올린 예제를 추가 할 수 있습니까? –

답변

2

The body element is the fallback if no other element has focus :

어떤 요소가 집중하지가있을 수 있습니다; 어떤 요소에 초점이 맞추어 져 있지 않을 때, 문서에 의해 수신 된 키 이벤트는 body 요소를 대상으로해야한다. [...] 사용자 에이전트는 ... 최상위 레벨 브라우징 컨텍스트 당 하나의 포커스 요소 만 지원할 수있다. - 사용자 에이전트는 이와 관련하여 플랫폼 규칙을 따라야합니다.

the CSS :focus selector도 참조하십시오. 문제는 전체 탐색 컨텍스트의 한 요소 만 포커스를 가질 수 있다는 것입니다. 초점이 iframe 안에 있지 않으면 다른 위치에 있고 iframebody 요소가 그 대체물입니다.

https://www.w3.org/TR/html5/browsers.html#nested-browsing-contextiframe은 최상위 수준의 탐색 컨텍스트가 아닌 중첩 된 탐색 컨텍스트라고 말합니다. 마치 페이지 전체에 초점을 맞춘 요소가 하나 뿐인 것처럼 보입니다. 귀하의 iframe 안에 있지 않으면 대신 body가 반환됩니다.

0

iframe 페이지에이 스크립트를 삽입하십시오.

$("body").delegate("*", "focus blur", function() { 
    var elem = $(this); 
    setTimeout(function() { 
    elem.toggleClass("focused", elem.is(":focus")); 
    }, 0); 
}); 

샘플은 iframe 페이지 인 -

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <style> 
     .focused {background: #F00;} 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 
<form action="#"> 
    First name:<br><input type="text" name="firstname" value="Mickey" > 
    <br> 
    Last name:<br><input type="text" name="lastname" value="Mouse"> 
    <br><br><input type="submit" value="Submit"> 
</form> 

<script> 
$("body").delegate("*", "focus blur", function() { 
    var elem = $(this); 
    setTimeout(function() { 
    elem.toggleClass("focused", elem.is(":focus")); 
    }, 0); 
}); 
</script> 
</body> 
</html>