iframe에서 호스트 페이지의 다음 초점 가능 요소로 초점 전달

이 질문은 원래 GOBLiN에서 Stackoverflow에 의해 요청되었습니다. 나는 이 질문에 답하는 것이 즐거웠기 때문에 여기에서 여러분과 그 과정을 공유하지 않을 이유가 없다고 생각했습니다.
그의 질문에서 잘린 주요 내용은 다음과 같습니다.

질문: iframe이 포커스를 받고 새 탭 키 누르기가 감지된 후 포커스를 호스트 페이지의 다음 포커스 가능 요소로 전달하려면 어떻게 해야 합니까?

간단한 예:

<!-- host page -->
<button> first button </button>
<iframe src="myIframeWidget.com"/>
<button> second button </button>

위에서 첫 번째 버튼에 포커스가 있는 경우 예상되는 동작은 첫 번째 탭에서 iframe이 포커스를 받고 다음 탭에서 두 번째 버튼이 포커스를 받는 것입니다(iframe 내부의 포커스 가능한 모든 요소 건너뛰기).

iframe에 초점이 맞춰지고 탭이 눌리면 iframe에서 두 번째 버튼으로 초점을 전달해야 합니다.

그리고 여기 내가 솔루션을 찾은 방법이 있습니다.

이것이 호스트 페이지의 내용이라고 가정해 보겠습니다.

<button>Main button 1</button>
<button>Main button 2</button>
<iframe id="frame1" name="frame1" src="iframe.html"></iframe>
<button>Main Button 3</button>

이제 iframe.html인 iframe에서 포커스를 받으면 다음 탭 누름에서 포커스를 Main Button 3 버튼으로 전달하려고 합니다. 다음과 같이 iframe.html에 초점을 맞출 수 있는 콘텐츠가 많이 있을 수 있습니다.

<button>I frame button 1</button>
<button>I frame button 2</button>

당신이 건너 뛰고 싶은. 이를 위해 iframe.html 내부에 간단한 javascript를 작성할 수 있습니다. 즉,

let go_next = false;
document.body.addEventListener('keyup', (e)=> {
    if( e.which == 9 ) {
        if(go_next){
            window.parent.document.getElementById('frame1').nextElementSibling.focus()
            go_next=false
        }else{
            go_next =true;
        }
    }
});

코드 설명

사용자가 iframe에도 초점을 맞출 수 있어야 하므로 초점이 다음 요소로 즉시 전달되는 것을 원하지 않습니다. 이러한 이유로 스크립트는 사용자가 변수를 선언하여 처음으로 iframe에 집중했다고 가정합니다go_next = false.

참고: Main Button 2에서 iframe으로 초점을 맞추는 것은 iframe.html 내에서 탭 누르기로 계산됩니다. 그래서 iframe.html 내부의 첫 번째 탭 누름을 무시해야 합니다.

따라서 사용자가 iframe에 초점을 맞춘 직후 변수go_next = true를 만들고 있습니다. 이제 다음 탭을 누를 때 호스트 페이지의 다음 요소로 포커스를 전달할 수 있습니다.

이를 위해 window.parent를 사용하여 호스트 페이지를 잡고 document.getElementById('frame1')를 사용하여 호스트 페이지에서 iframe을 선택하고 nextElementSibling를 사용하여 iframe의 다음 요소를 선택하고 포커스 기능을 사용하여 다음 요소에 초점을 맞춥니다. 그리고 포커스를 통과한 후 다음 시간을 위해 다시 go_next = false를 만들고 있습니다.

테스트할 수 있도록 작은 데모를 준비했습니다here.

도메인 간 대체 솔루션

교차 도메인은 종종 콘텐츠 스크립트 정책을 사용하여 상위 호스트에 대한 액세스를 차단합니다.
이 문제를 극복하려면 약간 까다롭게 플레이해야 합니다.iframe.html 페이지 끝에 보이지 않는 버튼을 만들 것입니다. 예:

<button id="last_element" style="opacity:0;filter:alpha(opacity=0);">Hello</button>

iframe에 초점을 맞추는 데 사용된 탭 누르기는 iframe.html 내에서 액세스할 수 있다고 말한 것을 기억하십니까?
글쎄, 우리는 그 이점을 이용하여 iframe.html 의 마지막 버튼에 집중할 것입니다. 그렇게 하려면 iframe.html 끝에 이 스크립트를 추가하십시오.

document.body.addEventListener('keyup', (e)=> {
    if( e.which == 9 ) {
        document.querySelector("#last_element").focus()
    }
});

이제 iframe의 마지막 요소에 초점이 맞춰지면 다음 초점은 항상 호스트 페이지의 다음 요소가 됩니다.
codepen에 대한 데모입니다.