크기 조정 사용

크기 조정 사용

반응형

최근에 iframe과 대화형 제품 목록을 동적으로 로드하는 UI를 개선해야 할 필요성이 생겼습니다. 이 시나리오에서 나는 두 가지 주요 경험을 위해 해결해야 한다는 것을 알게 되었습니다.

내용의 높이와 일치합니다.

하위 노드(팝업)가 제거되거나 추가된 시기를 정확히 알 수 있습니다.

크기 조정 및 돌연변이 관찰자 입력

ResizeObserver와 MutoObserver는 개발자가 DOM 요소의 크기 조정과 DOM 요소의 속성(선조 포함)에 대한 변경 사항을 효율적으로 감시할 수 있는 두 개의 웹 API입니다.

관찰자 크기 조정

첫 번째 작업은 로드 후 iframe 높이가 콘텐츠 높이에 일치하기를 원했습니다. 위와 같이 관찰자 크기 조정 인스턴스를 작성한 후. 대상 요소의 업데이트된 크기를 유지하는 contentRect 속성을 캡처합니다(관찰자는 목록을 반환하지만 첫 번째 항목만 필요합니다(예: 크기 조정).목록[0]) 다음으로 iframe의 높이를 업데이트된 크기의 높이로 설정합니다. 아래는 코드의 모양을 보여 주는 예입니다.

// inside a handleIframe() function that runs when the iframe loads let documentBody = iframe.contentWindow.document.body; iframeRo.observe(documentBody);

참고: Firefox에는 또한 관찰하고자 하는 실험용 속성인 BoxSize도 있습니다.

둘째, iframe 내부에 있는 팝업이 iframe이 아닌 전체 화면을 차지하기 위해 표시되어야 합니다. 아래 코드와 같이 몇 가지 조건에 따라 CSS 클래스를 추가 및 제거하여 처리합니다.

돌연변이 유형이 하위 요소 목록의 변경입니까(하위 목록)?

하위 노드가 추가 또는 제거되었습니까(mutation.addedNodes/mutation.removedNodes)?

해당 하위 노드에 전환 중인 클래스(className.include)가 있습니까?

구성을 잊지 마십시오!

돌연변이 관찰자에게 전화할 때는 효율성을 유지하기 위해 추적하는 것을 제한하면서 무엇을 볼 것인지도 알려주는 것이 가장 좋습니다.

var moConfig = { childList: true, subtree: false };

여기서 우리는 관찰자에게 즉각적인 아동 요소들의 변화를 위해 발사하라고 말하고 있습니다. 하지만 아동 요소들을 더 깊이 들여다보지 말도록요. 그래서 관찰자를 초기화할 때 아까의 관찰자 크기 조정 라인 다음에 추가했습니다.

// inside a handleIframe() function that runs when the iframe loads let documentBody = iframe.contentWindow.document.body; iframeRo.observe(documentBody); iframeMo.observe(documentBody, moConfig);

줄 아래로

내 경우 iframe의 src를 제어 및 업데이트하고 iframe 콘텐츠가 변경될 때마다 서로 새로운 관찰자를 계속 추가하지 않도록 하는 탐색 메뉴가 있었습니다. handleIframe 기능을 실행하기 전에 연결 끊기 메서드를 호출하여 구현됩니다.

// inside a change event handler iframeRo.disconnect(); iframeMo.disconnect(); handleIframe();

이게 도움이 되거나 내가 놓친 게 있으면 알려줘. 읽어줘서 고맙고 행복한 코딩!

from http://issue-disk.tistory.com/526 by ccl(A) rewrite - 2021-07-28 05:26:02