중급 Iframe API 참조

이 참조 페이지에서는 중간 iframe을 HTML 페이지에 로드하는 방법을 설명합니다.

중간 iframe 자바스크립트 라이브러리 로드

Google One 탭하여 표시할 HTML 페이지에 다음 코드 스니펫을 삽입합니다.

<script src="https://accounts.google.com/gsi/intermediate"></script>

HTML API

ID 속성이 g_id_intermediate_iframe로 설정된 HTML 요소를 포함하여 중간 iframe을 로드할 수 있습니다. 다음 코드 스니펫 예를 참고하세요.

<script src="https://accounts.google.com/gsi/intermediate"></script>
<div id="g_id_intermediate_iframe"
     data-src="https://example.com/onetap_iframe.html">
</div>

ID가 'g_id_middle_iframe'인 요소

중간 iframe 데이터 속성은 <div> 및 <span>와 같은 표시되거나 표시되지 않는 요소에 배치할 수 있습니다. 유일한 요구사항은 요소 ID를 g_id_intermediate_iframe로 설정하는 것입니다. 이 ID를 여러 요소에 추가하지 마세요.

다음 표에는 데이터 속성과 그에 대한 설명이 나와 있습니다.

속성
data-src 원탭 중간 iframe의 URI
data-done 원탭 UX가 완료될 때 트리거될 자바스크립트 콜백 메서드.

데이터-src

이 속성은 원탭 중간 iframe의 URI입니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수 예
string 지원됨 data-src="https://example.com/onetap_iframe.html"

데이터 완료

이 속성은 원탭 UX가 완료될 때 트리거되는 자바스크립트 콜백 메서드입니다.

기본적으로 원탭 UX가 완료되면 콘텐츠 페이지가 새로고침됩니다. 자체 완료 콜백을 제공하여 기본 동작을 재정의할 수 있습니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수 예
함수 선택사항 data-done="onOneTapSuccess"

JavaScript API

JavaScript 메서드를 호출하여 중간 iframe을 로드할 수 있습니다.

메서드: google.accounts.id.initializeIntermediate

google.accounts.id.initializeIntermediate 메서드는 구성 객체를 기반으로 중간 iframe을 로드합니다. 메서드의 다음 코드 예를 참고하세요.

google.accounts.id.initializeIntermediate(IntermediateConfig)

다음 코드 예에서는 onload 함수를 사용하여 google.accounts.id.initializeIntermediate 메서드를 구현합니다.

<script>
  window.onload = function () {
    google.accounts.id.initializeIntermediate({
      src: 'https://example.com/intermediate'
    });
  };
</script>

데이터 유형: IntermediateConfig

다음 표에는 각 필드에 대한 설명이 나와 있습니다.

필드
src 원탭 중간 iframe의 URI
done 원탭 UX가 1일 때 트리거되는 자바스크립트 콜백 메서드.

src

이 필드는 원탭 중간 iframe의 URI입니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수 예
string 지원됨 src: "https://example.com/onetap_iframe.html"

완료

이 필드는 원탭 UX가 완료될 때 트리거되는 자바스크립트 콜백 메서드입니다.

기본적으로 원탭 UX가 완료되면 콘텐츠 페이지가 새로고침됩니다. 자체 완료 콜백을 제공하여 기본 동작을 재정의할 수 있습니다. 자세한 내용은 다음 표를 참고하세요.

유형 필수 예
함수 선택사항 done: onOneTapSuccess