중간 iframe API 참조

이 참조 페이지에서는 iframe을 사용하여 웹페이지에 원탭 메시지를 삽입하는 데 사용되는 중간 iframe API를 설명합니다.

중간 iframe 작업에 관한 자세한 내용은 iframe을 사용하여 원탭 통합을 참고하세요.

중간 iframe JavaScript 라이브러리 로드

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_intermediate_iframe'인 요소

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

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

data-src

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

data-done

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

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

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입니다. 자세한 내용은 다음 표를 참고하세요.

완료

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

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