스크롤이 바닥에 도달했는지 감지하는 것은 결코 쉬운 일이 아닙니다. 스타일링을 어떻게 하느냐에 달려있기 때문이다. 그러나 iframe에서는 스토리 ID가 다릅니다. 아래는 모든 iframe에서 수행한 방법입니다.

요구 사항

백엔드에서 계약이 제공되는 최종 사용자 라이센스 계약 화면을 만들어야 했고 프론트엔드에서 HTML을 표시할 것입니다. 분명히 iframe은 웹 사이트 스타일이 계약 스타일을 방해하지 않기 때문에 자연스러운 옵션이었습니다.

사용자가 iframe의 끝까지 아래로 스크롤했을 때만 동의 버튼을 활성화해야 했습니다.

해결책

이것이 내가 한 방법입니다. 아래는 코드의 html 부분입니다.

<iframe id="user-license" #iframe style="overflow:hidden;height:90%;width:100%"
            height="90%" width="100%" frameborder="0" wmode="transparent"></iframe>

anguale 구성 요소 ts i에 아래와 같은 내용을 추가했습니다.

@Component({
  selector: 'app-end-user-license',
  templateUrl: './end-user-license-popup.component.html',
  styleUrls: ['./modal-components.component.css', './end-user-license-popup.css']
})
export class EndUserLicensePopupComponent implements OnInit {
  // Get the iframe element reference
  @ViewChild('iframe', {static: false}) iframe: ElementRef;

  userLicense = '';
  isLoading: boolean;
  enableAccept: boolean;

  constructor(
    private http: HttpService) {
  }

  ngOnInit() {
    this.isLoading = true;
    /* Get the end user license */
    this.http.get('/terms-and-conditions/')
    .then((res: any) => {
      this.isLoading = false;

      // Get the iframe's document reference
      const doc =  this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;

      // Open the doc and add html in it
      doc.open();
      doc.write(res.html);
      doc.close();
      const self = this;

      // Add scroll event
      doc.addEventListener('scroll', function(event) {
        console.log('event: ', event);
        const iframe = self.iframe.nativeElement;
        if (Math.ceil($(iframe.contentWindow).scrollTop())  === $(iframe.contentWindow).height() - $(iframe.contentWindow)[0].innerHeight) {
          // Set true
          self.enableAccept = true;
        }
      }, false);
    })
    .catch(err => {
      console.log(err);
      this.isLoading = false;
    });
  }
}

아래에서 볼 수 있듯이 끝까지 스크롤했는지 감지하는 중요한 한 줄이 있습니다. contentWindow 또는 contentDocument를 사용할 수 있습니다. 이렇게 하면 iframe 내부의 문서에 액세스할 수 있습니다.

if ($(iframe.contentWindow).scrollTop() === $(iframe.contentWindow).height() - $(iframe.contentWindow)[0].innerHeight)

스크롤 이벤트는 항상 큰 문제입니다. 이것은 내가 생각해 낸 간단한 솔루션이었습니다. 항상 콘솔에서 이벤트를 인쇄하여 키를 확인하고 필요한 데이터를 가져옵니다. 도움이 되길 바라며 댓글로 여러분의 생각을 알려주세요.